移动端开发需要注意的20个要点
移动端开发注意要点
原⽂地址：
移动前端开发正逐渐步⼊前端技术的主流，事实上跟在⼀般的PC上，并不需要你掌握额外的技术，然⽽你在PC Web上那⼀套在多数情况下并不适⽤于⼿机Web，你必须知道这其中的注意点。当然移动web给⼈的感觉是⼀个拼H5和CSS3的阵地，这⾥⾯有⾜够⾼⼤上的技术等着你去驾驭，在这⽅⾯，你可以欣喜地说：让IE见⿁去吧。
⾸先我们来看看webkit内核中的⼀些私有的meta标签，这些meta标签在开发webapp时起到⾮常重要的作⽤。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
第⼀个meta标签表⽰：强制让⽂档的宽度与设备的宽度保持1:1，并且⽂档最⼤的宽度⽐例是1.0，且不允许⽤户点击屏幕放⼤浏览； 第⼆个meta标签是iphone设备中的safari私有meta标签，它表⽰：允许全屏模式浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表⽰：告诉设备忽略将页⾯中的数字识别为电话号码。
2、HTML5标签的使⽤
在开始编写webapp时，建议前端⼯程师使⽤HTML5，⽽放弃HTML4，因为HTML5可以实现⼀些HTML4中⽆法实现的丰富的WEB应⽤程序的体验，可以减少开发者很多的⼯作量，当然了你决定使⽤HTML5前，⼀定要对此⾮常熟悉，要知道HTML5的新标签的作⽤。⽐如定义⼀块内容或⽂章区域可使⽤section标签，定义导航条或选项卡可以直接使⽤nav标签等等。 在项⽬开发过程中可以会遇到内容排列显⽰的布局，假如你遇见这样的视觉稿，建议你放弃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、web safarik、chrome都能够正常的显⽰，你⽆需再次考虑设备的分辨率。
7、学会使⽤webkit-box
上⼀节，我们说过⾃适应布局模式，有些同学可能会问：如何在移动设备上做到完全⾃适应呢？很感谢webkit为display属性提供了⼀个webkit-box的值，它可以帮助前端⼯程师做到盒⼦模型灵活控制。
8、如何去除Android平台中对邮箱地址的识别
看过iOS webapp API的同学都知道iOS提供了⼀个meta标签:⽤于禁⽤iOS对页⾯中电话号码的⾃动识别。在iOS中是不⾃动识别邮件地址的，但在Android平台，它会⾃动检测邮件地址，当⽤户touch到这个邮件地址时，Android会弹出⼀个框提⽰⽤户发送邮件，如果你不想Android⾃动识别页⾯中的邮件地址，你不妨加上这样⼀句meta标签在head中：
<meta content="email=no" name="format-detection" />
9、如何去除iOS和Android中的输⼊URL的控件条
你的⽼板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让⽤户看见那个输⼊url的控件条？
合规管理系统答案是可以做到的。我们可以利⽤⼀句简单的javascript代码来实现这个效果：
setTimeout(scrollTo,0,0,0);
请注意，这句代码必须放在load⾥才能够正常的⼯作，⽽且你的当前⽂档的内容⾼度必须是⾼于窗⼝的⾼度时，这句代码才能有效的执⾏。
10、如何禁⽌⽤户旋转设备
我曾经也想禁⽌⽤户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运⾏。但现在我可以很负责任的告诉你：别想了！在移动版的webkit中做不到！
⾄少Apple webapp API已经说到了：我们为了让⽤户在safari中正常的浏览⽹页，我们必须保证⽤户的设备处于任何⼀个⽅位时，safari 都能够正常的显⽰⽹页内容（也就是⾃适应），所以我们禁⽌开发者阻⽌浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是⼀般的苹果。
iOS已经禁⽌开发者阻⽌orientationchange事件，那Android呢？对不起，我没有到任何资料说Android禁⽌开发者阻⽌浏览器orientationchange事件，但是在Android平台，确实也是阻⽌不了的。
11、如何检测⽤户是通过主屏启动你的webapp
看过Apple webapp API的同学都知道iOS为safari提供了⼀个将当前页⾯添加主屏的功能，按下iphoneipodipod touch底部⼯具中的⼩加号，或者ipad顶部左侧的⼩加号，就可以将当前的页⾯添加到设备的主屏，在设备的主屏会⾃动增加⼀个当前页⾯的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最⼤的区别是它清除了浏览器上⽅和下⽅的⼯具条，这样你的webapp就更加像是nativeapp了，还有⼀个区别是window对像中的navigator⼦对象的⼀个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false，从主屏启动webapp时，navigator.standalone为true， 我们可以通
过navigator.standalone这个属性获知⽤户当前是否是从主屏访问我们的webapp的。
在Android中从来没有添加到主屏这回事！
陶瓷压机12、如何关闭iOS中键盘⾃动⼤写
我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启⾸字母⼤写的功能的，根据某些业务
场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认⾸字母⼤写。
13、iOS中如何彻底禁⽌⽤户在新窗⼝打开页⾯
有时我们可能需要禁⽌⽤户在新窗⼝打开页⾯，我们可以使⽤a标签的target=”_self“来指定⽤户在新窗⼝打开，或者target属性保持空，但是你会发现iOS的⽤户在这个链接的上⽅长按3秒钟后，iOS会弹出⼀个列表按钮，⽤户通过这些按钮仍然可以在新窗⼝打开页⾯，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁⽌iOS弹出这些按钮。这个技巧仅适⽤iOS对于Android平台则⽆效。
14、iOS中如何禁⽌⽤户保存图⽚＼复制图⽚
我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为⼀个img标签指定-webkit-touch-callout为none也会禁⽌设备弹出列表按钮，这样⽤户就⽆法保存＼复制你的图⽚了。
15、iOS中如何禁⽌⽤户选中⽂字
我们通过指定⽂字标签的-webkit-user-select属性为none便可以禁⽌iOS⽤户选中⽂字。
16、iOS中如何获取滚动条的值
桌⾯浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？
张力计算通过window.scrollY和window.scrollX我们可以得到当前窗⼝的y轴和x轴滚动条的值。
17、如何解决盒⼦边框溢出
当你指定了⼀个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对⽂本框定义为宽度100％，将其定义为块级元素以实现全屏⾃适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了⽂档，导致出现横向滚动条，为解决这⼀问题，我们可以为其添加⼀个特殊的样式-webkit-box-sizing:border-box;⽤来指定该盒⼦的⼤⼩，包括边框的宽度。
18、如何解决Android 2.0以下平台中圆⾓的问题
如果⼤家够细⼼的话，在做wap站点开发时，⼤家应该会发现android 2.0以下的平台中问题特别的多，⽐如说边框圆⾓这个问题吧。
在对⼀个元素定义圆⾓时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆⾓：
-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中⼀定要加）；
如果对针对边框做样式定义，⽐如border:1px solid #000；那么-webkit-border-radius这属性必须要出现在border属性后。
假如我们有这样的视觉元素，左上⾓和右上⾓是圆⾓时，我们必须要先定义全局的(4个⾓的圆⾓值)-webkit-border-radius:5px；然后再依次的覆盖左下⾓和右下⾓，-webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-border:0；否则在android 2.0以下的平台中将全部显⽰直⾓，还有记住！-webkit这个前缀⼀定要加上！
19、如何解决android平台中页⾯⽆法⾃适应
虽然你的html和css都是完全⾃适应的，但有⼀天如果你发现你的页⾯在android中显⽰的并不是⾃适应的时候，⾸先请你确认你的head标签中是否包含以下meta标签：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />
如果有的话，那请你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请⽴即加上吧！
20、如何解决iOS 4.3版本中safari对页⾯中5位数字的⾃动识别和⾃动添加样式
新的iOS系统也就是4.3版本，升级后对safari造成了⼀个bug：即使你添加了如下的meta标签，safari仍然会对页⾯中的5位连续的数字进⾏⾃动识别，并且将其重新渲染样式，也就是说你的css对该标签是⽆效的。
<meta name="format-detection" content="telphone=no" />电力线网络摄像机
增感油墨我们可以⽤⼀个⽐较龌龊的办法来解决。⽐如说⽀付宝wap站点中显⽰⾦额的标签，我们都做了如下改写：
<button class="t-balance">95009.00</button>元
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议