移动前端开发正逐渐进入前端技术的主流。事实上，它不需要您在普通PC上掌握额外的技术。但是，你在PCWebSets上做的，大多数情况下是不适合移动Web的，注意点你一定要知道。当然，移动端给人的感觉就是H5和CSS3的战场，有足够多的先进技术等着你去驾驭。对此，你可以痛快地说：让IE去死吧。1、首先我们来看一下webkit内核中的一些私有元标签。这些元标记在开发Web应用程序中起着非常重要的作用。***元标签表示：强制保持文档宽度与设备宽度1:1，文档最大宽度比为1.0，不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safariprivatemeta标签，意思是：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，指定了iphone中safari顶部状态栏的样式；第四个元标签的意思是：告诉设备忽略页面中识别为电话号码的号码。2、HTML5标签的使用在开始写webapp的时候，建议前端工程师使用HTML5而不是HTML4，因为HTML5可以实现一些HTML4无法实现的丰富的WEB应用体验，可以减少很多开发人员的工作量。当然在你决定使用HTML5之前，你必须非常熟悉它并且知道HTML5的新标签的作用。例如，可以使用section标签定义一段内容或文章区域，可以直接使用nav标签定义导航栏或标签等等。3.放弃CSS的float属性。在项目开发过程中，你可能会遇到内容排列和展示的布局。如果你遇到这样的视觉稿，建议你放弃float，直接使用display:inline-block。4、使用CSS3边框背景属性，使该按钮具有圆角效果、内发光效果和高亮效果。这样的按钮不能使用CSS3编写。当然圆角可以用CSS3写，但是高光和内发光就不行了。它不能用CSS3编写。这时候不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image是一个非常复杂的样式属性。5.块级a标签请保证每条数据都放在一个a标签中，为什么要这样做？因为在触控手机上，为了提升用户体验，用户的可点击区域应该尽可能的大。6.自适应布局模式在写CSS的时候，我不建议前端工程师去固定容器的宽度（不管是外层容器还是内层）。为了适应各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用自适应布局模式），因为这样做可以让你的页面出现在ipad,itouch,ipod,iphone,android,websafarik,Chrome可以正常显示，不需要再考虑设备的分辨率。7、学习使用webkit-box上一节我们讲了自适应布局模式。可能有同学会问：如何在移动设备上实现全自适应？非常感谢webkit为display属性提供了一个webkit-box值，可以帮助前端工程师实现对box模型的灵活控制。8、Android平台如何取消对邮箱地址的识别看过iOSwebappAPI的同学都知道，iOS提供了一个meta标签：用于关闭iOS对页面电话号码的自动识别。在iOS中，不会自动识别邮箱地址，但在Android平台上，会自动检测邮箱地址。当用户触摸电子邮件地址时，Android会弹出一个框提示用户发送电子邮件。如果不想让Android自动识别页面email地址，不妨在头部添加这样一个meta标签：9.如何去除iOS和Android中输入URL的控制栏你的老板或者PD或者交互设计师可能会问你：我们能不能让我们的webapp更像nativeapp，我不想让用户看到输入url的控制栏？答案是可以做到。我们可以使用一个简单的javascript代码来实现这个效果：setTimeout(scrollTo,0,0,0);请注意，这段代码必须放在window.onload中才能正常工作，而你当前文档的内容只有高度必须高于窗口高度时，这段代码才能有效执行。10.如何禁止用户旋转设备？我曾经想禁止用户旋转设备，也想实现一些客户端做的事情：只能在纵向模式或横向模式下正常工作。但是现在我可以很负责任的告诉你：你想都别想！手机版的webkit做不到！至少苹果的webappAPI有说：为了让用户在safari中正常浏览网页，我们必须保证safari在用户设备处于任何方向时都能正常显示网页内容（即自适应），所以我们禁止了开发人员阻止浏览器的orientationchange事件。看来苹果的出发点是正确的。苹果确实不是普通的苹果。iOS已经禁止开发者阻止orientationchange事件，那么Android呢？不好意思，我没有查到Android禁止开发者阻止浏览器orientationchange事件的资料，但是在Android平台上，确实无法阻止。11.如何检测用户是通过主屏幕启动你的webapp。看过ApplewebappAPI的同学都知道，iOS为safari提供了将当前页面添加到主屏幕的功能。iphoneipodipodtouch底部工具中的小加号，或者ipad顶部左边的小加号，可以将当前页面添加到设备主屏幕，还有一个启动图标当前页面将自动添加到设备的主屏幕。单击启动图标可以快速方便地启动您的webapp。从主屏幕启动的webapp和浏览器访问你的webapp的区别在于它清除了浏览器上方和下方的工具栏，让你的webapp更像一个原生应用。另一个区别是在window对象中navigator子对象的一个??独立属性。当浏览器直接访问iOS中的站点时，navigator.standalone为false。当web应用程序从主屏幕启动时，navigator.standalone为true。我们可以使用属性navigator.standalone来了解用户当前是否正在从主屏幕访问我们的webapp。在Android中从来没有添加到主屏幕这样的东西！12、iOS中如何关闭键盘自动大写我们知道，在iOS中，弹出虚拟键盘时，键盘默认有首字母大写的功能。根据一些业务场景，我们可能需要关闭这个功能。移动版webkit为input元素提供了autocapitalize属性，通过指定autocapitalize="off"关闭键盘默认首字母大写。13、如何在iOS中完全禁止用户在新窗口打开页面？有时我们可能需要禁止用户在新窗口中打开页面。我们可以通过a标签的target="_self"来指定用户在新窗口打开，或者target属性为空。但是你会发现，iOS用户长按链接3秒后，iOS会弹出一个列表按钮，用户仍然可以通过这些按钮在新窗口中打开页面。在这种情况下，开发者指定的目标属性将失效。,但你可以通过将当前元素的-webkit-touch-callout样式属性指定为none来阻止iOS弹出这些按钮。此技巧仅适用于iOS，不适用于Android。14、如何防止用户在iOS中保存图片\复制图片？我们在第13个技巧中提到了元素的-webkit-touch-callout属性，将img标签的-webkit-touch-callout指定为none也会阻止设备弹出列表按钮，用户无法保存\复制你的图片.15、如何在iOS中禁止用户选择文本我们可以通过指定text标签的-webkit-user-select属性为none来禁止iOS用户选择文本。16、iOS中如何获取滚动条的值？桌面浏览器中滚动条的值是通过document.scrollTop和document.scrollLeft获取的，但是你会发现这两个属性在iOS中是未定义的。为什么？羊毛布？因为在iOS中没有滚动条的概念，在Android中可以通过这两个属性正常获取滚动条的值，那么我们在iOS中如何获取滚动条的值呢？通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。17.如何解决框边框溢出当你指定一个块级元素并为其定义边框时，将其宽度设置为100%。在移动设备的开发过程中，我们通常将文本框定义为100%的宽度，并将其定义为块级元素来实现全屏自适应样式，但是这时候你会发现边框（left和right)元素的每一个像素都会溢出文档，从而产生水平滚动条。为了解决这个问题，我们可以添加一个特殊的样式-webkit-box-sizing:border-box;指定框的大小，包括边框的宽度。18、如何解决Android2.0以下平台的圆角问题如果你足够细心，你应该会发现在Android2.0以下的平台开发wap站点时会出现很多问题，比如边框圆角的问题。在为元素定义圆角时，为了完全兼容android2.0以下的平台，我们必须遵循以下技巧来定义边框圆角：必须添加-webkit前缀（在iOS中可以不添加，但android必须加入）；如果你为边框定义了样式，比如border:1pxsolid#000;，那么属性-webkit-border-radius必须出现在border属性之后。如果我们有这样一个视觉元素，当左上角和右上角为圆角时，首先要定义全局（4个角的圆角值）-webkit-border-radius:5px;然后依次覆盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android2.0以下平台会显示所有直角，切记！必须加上前缀-webkit！19.如何解决android平台下的页面不能自适应的问题虽然你的html和css是全自适应的，但是哪天你发现你的页面在android下不能自适应，首先请确认你的head标签是否包含以下元标签：如果是，那么请仔细检查是否有该属性的值width=device-width，如果没有，请立即添加！20、iOS4.3版本如何解决safari自动识别页面5位数字和自动添加样式问题新的iOS系统是4.3版本。升级后对safari造成了一个bug：即使你添加了下面的meta标签，safari还是会自动识别页面上连续的5个数字并重新渲染style，也就是说你的css对这个标签无效.我们可以用一种肮脏的方式来解决。例如，我们将支付宝wap站点显示金额的标签重写为：95009.00元
