曲振飞的个人博客

专注于Web全栈开发、APP设计、网站建设

当前位置 : 主页 > 移动开发 > 移动端须掌握的屏幕宽度以及缩放问题

移动端须掌握的屏幕宽度以及缩放问题

时间:2016-09-02 15:13:27 栏目:移动开发 作者:曲振飞 点击: 908

做移动站有一个必要的知识, 就是关于屏幕宽度以及缩放问题。 我们习惯性的在<head>标签之间增加一个<meta>标签,那么小编为大家介绍下做移动端都涉及到meta的哪些属性

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

窗口设定

name="viewport"

页面大小屏幕等宽

width=device-width

初始缩放比例,1.0 表示原始比例大小

initial-scale=1.0

允许缩放的最小比例

minimum-scale=1.0

允许缩放的最大比例

maximum-scale=1.0

用户是否可以缩放,这里 no 表示不可以

user-scalable=no

上面最大最小比例其实就已经限制了无法缩放了, 和最后一个是否可以缩放有同样的功能。因为不同的手机,分辨率都不同,图片一定要能够自适应等比例缩放,才能保证布局的正确性。


关键字: 移动端,meta,屏幕缩放

关于站长

曲振飞,一个热忠、从事于互联网的90后青年.专注于网站建站、网站设计及优化.以用户体验、WEB标准为主旨,将网站的整体设计与网页设计的相关原理紧密结合.