jmobile学习之路 ---- 视口

Posted 2020-08-10 柔光

 

 

当我们的浏览器在窗口最大化的时候，此时屏幕的宽度，就是我们桌面的分辨率。这个规则仅仅适用于PC！

我们试图在iPhone中输出屏幕宽度，你会发现屏幕宽度是980！居然和PC屏幕差不多大！

 

 

苹果主导的这些手机厂商，为了使用户获得完整web体验（就是让用户在手机屏幕上，也能够看见完整的PC网页），

就大部分设备都会欺骗浏览器返回一个数值较大的“视口”(viewport)，告诉浏览器，别以为我身子小，

但是我想以980px宽度来显示这个页面。

iPhone的分辨率1136*640，三星Note3的分辨率1920*1080。但是分辨率和视口没有关系。他们的视口都是980px。

也就是说说，一个width值为980px的盒子，能够在这样的手机中撑满整个页面，并且恰好不出现横向滚动条。

 

 

 

视口对于我们实现响应式是很不方便的。980太大了，不符合我们心中的期待。

我们心中认为手机屏幕尺寸应该小300~400之间。

 

约束视口。

 

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

name="viewport" id="viewport" />  

 

一个id和name为viewport 的meta元标记，就表示现在要约束视口了。具体约束规则，写在content中，每个约束规则，用逗号隔开。

 

width=device-width  → 命令视口的宽度，变为设备的宽（以1024*768屏幕为标准。iPhone等手机通常为320~380之间不等）

 

initial-scale=1.0 → 命令视口默认的缩放等级为1

 

minimum-scale=1.0 → 命令视口最小缩放等级为1

 

maximum-scale=1.0,  → 命令视口最大缩放等级为1

 

user-scalable=no → 不允许用户缩放页面

 

 

 

加上了meta视口约束标记之后，iPhone的视口宽度就是320px。

 

 

 

所有的手机响应式界面，都要记得加上meta viewport视口约束标记！！！