手机端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、手机“屏幕宽度”和“屏幕分辨率”的区别

 

写手机端页面时，只需要考虑“屏幕宽度”

各类型手机device-width和device-height

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转为二维码