HTML移动端开发案例
一、视口
缩小屏幕宽度 刷新页面 打开手机 sina.cn
查看源代码 找到如<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
width=device-width 视口为设备宽度(就是人设置的一个宽度)
initial-scale=1.0 初始化的视口大小是1.0倍
maximum-scale=1.0 最大的倍数是1.0倍
user-scalable=0 不允许缩放视口
将 <meta name="viewport" content="width=device-width" />
改为
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
运行 在服务器上
打开 http://cli.im/ 草料二维码
将 http://localhost/04_约束视口.html 网址添加进去生成二维码下载即可
查看自己手机宽度值是多少
1、给我们的页面加上一条meta语句:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
继续用document.documentElement.clientWidth来测试宽度。你会发现,宽度不一样了。
不同设备的测试结果:
iphone6plus 414
锤子T2 360
小米Note 393
摩托罗拉 411
这个meta标签,就是“视口约束”。约束之后的视口宽度,和设备宽度相同,实际上就是人为设置的数字。每个设备出厂前都会设置一下约束视口之后的宽度。
约束之后的视口宽度,不是自己的分辨率!!每个手机的分辨率,都要比自己的视口宽度大得多得多!
可以通过chrome 模拟iPhone 添加/删除 meta name="viewport" 测试宽度值
如使用iphone6 plus 测试
不添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
是 980 字非常的小 相当于高空俯瞰页面
添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
是 414 字很大
将<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
改为
<meta name="viewport" content="width=320” />
在将 <h1 id="biaoti"></h1>
改为 <h1 id="biaoti">我是一个主标题</h1>
在将 biaoti.innerHTML = document.documentElement.clientWidth; 注释掉
运行
改为 <meta name="viewport" content="width=420" />
运行
改为 <meta name="viewport" content="width=520" />
运行
改为 <meta name="viewport" content="width=980" />
运行
结论: 视口越小,字越大。 视口越大,字越小。
作为前端开发工程师,我们丝毫不关心手机设备的分辨率,我们只关心它的视口。UI妹子关心分辨率的,因为UI妹子要做图标。
视口越小,字越大。所以你会发现约束视口之后的宽度都是介于320 ~ 480之间。这个数字足够小,所以看文字很清晰,字的大小刚刚好。
meta标签可以直接设置死宽度:
<meta name="viewport" content="width=320" />
一般没有人这么做,而是会:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这个meta标签设置了:
width=device-width 视口为设备宽度(就是人设置的一个宽度)
initial-scale=1.0 初始化的视口大小是1.0倍
maximum-scale=1.0 最大的倍数是1.0倍
user-scalable=0 不允许缩放视口
此时我们的手机屏幕就是一个320~480的一个屏幕宽度,呈递页面。文字大小刚刚好。所有的手机页面,都要加上面的那条meta。这样就不会以高空俯瞰页面。