网页如何缩小苹果电脑网页如何缩小 _经验知识

（点击上方公众号，可快速关注）
作者：伯乐在线专栏作者 - risker
http://web.jobbole.com/90075/
作者：伯乐在线专栏作者 - risker
http://web.jobbole.com/90075/
要搞懂移动端的适配问题，就要先搞明白像素和视口。
像素
在移动端给一个元素设置 width:200px 时发生了什么？这里的px到底是多长呢？像素是网页布局的基础，但是我们一直在用直觉使用它。
其实存在两种像素：
1. 设备像素
屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的，单位是pt 。
2. CSS像素
在CSS、JS中使用的一个抽象的概念，单位是 px 。
顺便说下，CSS像素也可以称为设备独立像素(device-independent pixels)，简称为dips，单位是dp 。
顺便说下，CSS像素也可以称为设备独立像素(device-independent pixels)，简称为dips，单位是dp 。
那么，我们现在再来说说一个元素 width:200px 以后会怎么样。这个元素跨越了200个CSS元素，200个CSS元素相当于多少个设备像素取决于两个条件：
页面是否缩放
屏幕是否为高密度
页面是否缩放
屏幕是否为高密度

文章插图
这两方面后面再解释，先梳理一下手机硬件之间的关系，注意这里使用的都是物理像素。
展开全文
【网页如何缩小苹果电脑网页如何缩小】以 iPhone5 为例，我们已知的是：
分辨率：1136pt x 640pt
指屏幕上垂直有 1136 个物理像素，水平有 640 个物理像素
屏幕尺寸： 4英寸

文章插图
注意英寸是长度单位，不是面积单位。4英寸指的是屏幕对角线的长度。
屏幕像素密度：326dpi
屏幕像素密度（Pibel Per Inch）简称 ppi，单位是 dpi（dot per inch）。这里指屏幕水平或垂直每英寸有326个物理像素。原则上来说，ppi越高越好，因为图像会更加细腻清晰。
ppi 是可以通过分辨率和屏幕尺寸计算得到的：
这个网站（https://www.sven.de/dpi/）列出了很多设备的分辨率和屏幕尺寸，并且计算了ppi 。
视口
桌面浏览器中，浏览器窗口就是约束你的CSS布局视口（又称初始包含块）。它是所有CSS百分比宽度推算的根源，它的作用是给CSS布局限制了一个较大宽度，视口的宽度和浏览器窗口宽度一致。
但是在移动端，情况就很复杂了。
布局视口
一个没有为移动端做优化的网页，会尽可能缩小网页让用户看到所有冬西。这是我的手机查看博客园的样子，你也可以在Chrome中以移动开发模式看到。
浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把视口宽度设置地很大，一般在 768px ~ 1024px 之间，较常见的宽度是 980px 。
所以，在手机上，视口与移动端浏览器屏幕宽度不再相关联，是完全独立的，这个浏览器厂商定的视口被称为布局视口。
布局视口我们是看不见的，只知道网页的较大宽度是 980px，并且被缩放在了屏幕内。
可以这样设置布局视口的宽度：
<meta name="viewport" content="width=640">
<meta name="viewport" content="width=640">
媒体查询与布局视口
700px 指的是布局视口的宽度
@media (min-width: 700px){
...
}
@media (min-width: 700px){
...
}
document.documentElement.clientWidth/Height返回布局视口的尺寸
视觉视口
视觉视口是用户正在看到的网页的区域，大小是屏幕中CSS像素的数量。
window.innerWidth/Height返回视觉视口的尺寸

网页如何缩小 苹果电脑网页如何缩小

网页如何缩小苹果电脑网页如何缩小