手机端web页面的一些注意事项
1、viewport的写法
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
宽度设为设备宽度（手机屏幕宽度），默认缩放比例设为不缩放，用户是否可手动缩放设为“否”
2、device-width具体是什么呢？
第一代iphone的时候，分辨率为320*480，屏幕尺寸为3.5寸（注意，这个3.5寸说的是屏幕的对角线宽），这时候device-width就是320px，也是手机的分辨率宽，此时device-width就是设备宽。但第二代的iphone分辨率提高为了480*960，屏幕尺寸为依然为3.5寸，如果device-width还是设备宽，那么同样是320px的页面放480*960的手机屏上，图文就会变得比较小，又会影响其可读性。因此iphone4/5的device-width一直维持在320px，ipad一直维持在1024px，但iphone6/6+的device-width变大为375px/414px。这个时候，device-width就不是设备宽了（也就不是分辨率的宽了），是一个中间层。Android采用的也是这一概念，其device-width值以360居多，但也不乏有像540px和600px这样的奇葩。在设置了<meta />标签以后，device-width值可以用window.innerWidth来获取device-width值。
device-width是一个中间层，对于iphone4/5,device-width是320px；对于iphone6/6+,device-width是375px/414px；对于android手机，device-width以360px居多。
引用自 口口一凡
3、<meta content="yes" name="apple-mobile-web-app-capable">
隐藏苹果手机的导航栏
4、手机“屏幕宽度”和“屏幕分辨率”的区别
写手机端页面时，只需要考虑“屏幕宽度”
| iphone4 | 320 | 480 |
| iphone5 | 320 | 568 |
| iphone6 | 375 | 667 |
| iphone6+ | 414 | 736 |
| ipad | 1024 | |
| android | 360 | |
所以，为了适配所有手机大小，一般将web页面的内容宽度设为320px；
5、在手机上测试移动web静态页面时，可以在源文件根路径开启一个web服务器
python -m SimpleHTTPServer 8080
注意：手机和pc连接在同一个局域网中
微信中访问，可以将url转为二维码
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
