1、要响应式开发web，也就是页面必须自适应屏幕大小，可以采用流体布局，如之前的文章（自适应宽度布局），其他具体的小问题可以采用media query解决（让IE支持CSS3 Media Query实现响应式Web设计和CSS3 Media Queries）；
2、因为手机大多是高级浏览器，可以使用html5+css3开发；
3、合理灵活的使用meta标签，具体如下；
<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标签表示：告诉设备忽略将页面中的数字识别为电话号码
4、一定要注意链接的大小，因为大多是触屏手机，要让用户很方便的能点击到标签（我以前看到过文章，现在找不到出处，好像是最小得42px*42px）:
操作对象的大小符合手指的操作，按键的大小设置规范：
食指点击的间距 约为7*7 mm， 1mm间距，
拇指点击8*8 mm，2mm间距。当前推荐的值为9mm 大小，最小应不小于7mm。
当然一些重要操作，或者频繁点击的区域可以设置的略微更大一些。
5、要做好优雅降级（平稳退化），少用JS，图片，要用户禁止下载JS和图片的时候页面也能体现价值（因为很多APP默认设置为3G下是不自动下载图片等资源的）。
6、对于图片的处理，只要设置宽度，让图片自适应，防止图片变形，当然要兼容的设备分辨率差距很大的时候，需要利用media queries根据分辨率的不同加载不同的图片（需要同一张设置为几种不同的规格）,一是防止小分辨率设备加载大图片浪费流量，二是防止大分辨率设备加载小图片导致的图片模糊问题。
7、当设置分辨率太小的话，显示正常模块显得太拥挤的情况下，可以利用media queries根据分辨率适当的显示或隐藏模块，如768px下显示2列布局，320px显示1列布局等。
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
8、当然也可以根据判断不同的终端跳转到不同的URL，见：手机平板等移动端适配跳转URL的javascript
9、手机浏览器多而乱，而且手机系统的默认处理方法也不同，兼容问题丝毫不比PC版的简单，所以要总结归纳常用的处理方法，如-webkit-tap-highlight-color:rgba(0,0,0,0)；/*禁止链接高亮*/-webkit-touch-callout:none;/*禁止链接长按弹出选项菜单*/等等
10、对手机平板的移动端来说，流量是很重要的，所以webapp中class和id的命名尽量断点，如头部可以命名为hd,中间为bd,底部为ft等（此建议待定，因为考虑到后期维护是否方便等问题）；
11、网站加载速度
虽然说国内将在2019年进入5G时代，但是毕竟是少数人会购买5G手机，大部分人还是停留在4G，因此企业开发手机端网站不要以为网速快了，就可以将手机网站开发内存很大，这样只会影响到网站加载速度，对用户体验不好，容易造成用户流失。
12、网站填充内容
一个网站能不能够吸引用户肯定是要看网站内容了，因为图片、视频、音乐都是点缀物，重要的还是这些内容，只有将手机网站内容撰写成用户需求的，这样用户停留时间就会变长，后面营销起来也会简单。
13、网站字体、图片、音乐版权费用
国家对于版权抓的很严格，以前你就算用明星也不会有太多人知道，现在要抓到在版权商授权情况下，使用这些字体、图片、音乐在互联网上面营销，那么是犯法会受到处罚，因此手机网站开发过程中，版权是一定要购买。
14、手机网站兼容性问题
相信大家都知道现在不同用户都有着不同智能手机，而智能手机屏幕也是不一样，想要让每个用户能够看到正常企业手机网站，就需要将手机网站兼容性问题解决，这个只有前端程序员才能实现，一些低端通常只是将一个浏览器兼容性解决，而没有考虑到其他，这就导致企业网站在其他浏览器上面出现问题，直接造成用户流失。企业手机端网站开发这边是比较推荐，各位企业管理人员直接找专业网站建设公司帮忙，因为他们有专业开发团队，有着丰富开发经验，能够为企业建设出来令企业市场用户喜欢手机网站，相信企业拿这个网站做营销效果肯定是比较好。
其他注意问题
1.在项目开发过程中可以会遇到内容排列排列显示的布局，建议你放弃float，可以直接使用display:block;
2.请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。
3.学会使用webkit-box。
我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个 "webkit-box" 的值，它可以帮助前端工程师做到盒子模型灵活控制。
4、如何去除Android平台中对邮箱地址的识别 看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平 台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的 邮件地址，你不妨加上这样一句meta标签在head中
5、如何去除iOS和Android中的输入URL的控件条 你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。
6、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的 webkit中做不到！至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容 （也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果
公 司的出发点是正确的，苹果确实不是一般的苹果。iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找 到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。
7、如何检测用户是通过主屏启动你的webapp
看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone\ipod\ipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点 击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工 具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属 性。iOS中浏览器直 接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为 true， 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。在Android中从来没有添加到主 屏这回事！
8、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为 input元素提供了autocapitalize属性，通过指定来关闭键盘默认首字母大写。
具体的经验建议：
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。 备注：transparent的属性值在android下无效。
2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改。
3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅（这个属性会调用硬件加速模式，无需通过JS引擎，直接浏览器内核渲染），但是在android下不可乱用，很多见所未见的bug就是因为这个。
4、@-webkit-keyframes可以预定义很多你所想到的动画，然后通过-webkit-transition来调用。
5、-webkit-background-size可以做高清图标，不过一些低版本的android只能识别background-size，所以有必要两个都要写上；用这个属性的时候推荐用cover这个值，可以自动去匹配宽和高。
6、border-radius、box-shadow、gradient、border-image，不解释，可以精简代码。
7、android、ios4及以下，固定宽/高块级元素的overflow:scroll/auto失效，属于浏览器的bug，可借助第三方工具实现。
8、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
9、css3动画会影响你的自动聚焦，所以自动聚焦要在动画执行之前来做，或者直接舍弃。
10、如果涉及较多域外链接，DNS Prefetching可以帮你做DNS预解析。
11、如果你希望你的站点更多地在SNS上传播，那么Open Graph Protocol会比较适合你。
12、当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡。
13、IOS禁止横竖屏时字体变大，-webkit-text-size-adjust: none;
14、iphone的Retina显示屏的css中的数值都得翻倍，包括图片大小也得翻倍，Retina显示屏精致，可以简单理解为Retina显示屏上的1像素相当于普通的2像素。
15、解决闪屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；
16、触摸事件用touch系列，不要用click替代；
17、关于电量，JPEG最省电（JPEG>PNG>GIF）,图片数量约多，约大约耗电，AJAX动态内容耗电，reflow和repaint耗电，webGL和translate3d耗电
参考：https://github.com/AlloyTeam/Mars/tree/master/issues
https://github.com/hoosin/mobile-web-favorites
https://github.com/jtyjty99999/mobileTech
网友评论