易申建设网站,重庆网站建设 重庆网站制作,比较流行的sns营销网站,温州企业网站设计转载自:https://github.com/riskers/blog/issues/17 要搞懂移动端的适配问题#xff0c;就要先搞明白像素和视口。 像素 在移动端给一个元素设置 width:200px 时发生了什么#xff1f;这里的px到底是多长呢#xff1f;像素是网页布局的基础#xff0c;但是我们一直在用直觉…转载自:https://github.com/riskers/blog/issues/17 要搞懂移动端的适配问题就要先搞明白像素和视口。 像素 在移动端给一个元素设置 width:200px 时发生了什么这里的px到底是多长呢像素是网页布局的基础但是我们一直在用直觉使用它。 其实存在两种像素 1. 设备像素 屏幕的物理像素任何设备屏幕的物理像素的数量都是固定不变的单位是pt。 2. CSS像素 在CSS、JS中使用的一个抽象的概念单位是 px。 顺便说下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 单位是 dpidot per inch。这里指屏幕水平或垂直每英寸有326个物理像素。原则上来说ppi越高越好因为图像会更加细腻清晰。ppi 是可以通过 分辨率 和 屏幕尺寸 计算得到的 这个网站列出了很多设备的分辨率和屏幕尺寸并且计算了ppi。 视口 桌面浏览器中浏览器窗口就是约束你的CSS布局视口又称初始包含块。它是所有CSS百分比宽度推算的根源它的作用是给CSS布局限制了一个最大宽度视口的宽度和浏览器窗口宽度一致。 但是在移动端情况就很复杂了。 布局视口 一个没有为移动端做优化的网页会尽可能缩小网页让用户看到所有东西。这是我的手机查看博客园的样子你也可以在Chrome中以移动开发模式看到。 浏览器厂商为了让用户在小屏幕下网页也能够显示地很好所以把视口宽度设置地很大一般在 768px ~ 1024px 之间最常见的宽度是 980px。 所以在手机上视口与移动端浏览器屏幕宽度不再相关联是完全独立的这个浏览器厂商定的视口被称为布局视口。 布局视口我们是看不见的只知道网页的最大宽度是 980px 并且被缩放在了屏幕内。 可以这样设置布局视口的宽度 meta nameviewport contentwidth640 媒体查询与布局视口 700px 指的是布局视口的宽度 media (min-width: 700px){...
} document.documentElement.clientWidth/Height返回布局视口的尺寸 视觉视口 视觉视口是用户正在看到的网页的区域大小是屏幕中CSS像素的数量。 window.innerWidth/Height返回视觉视口的尺寸 理想视口 布局视口明显对用户是不友好的完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念它是对设备来说最理想的布局视口尺寸。理想视口中的网页用户最理想的宽度用户进入页面的时候不需要缩放。 现在讨论所谓的『最理想的宽度』到底是多少其实如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口 meta nameviewport contentwidthdevice-width定义理想视口是浏览器的事情并不能简单地认为是开发者定义的开发者只能使用。 screen.width/height返回理想视口的尺寸有严重的兼容性问题---可能返回两种值 理想视口的尺寸下载浏览器屏幕的设备像素尺寸内置浏览器Screen size tests和Understanding viewport可以测试你的设备的screen.width值同一设备的不同浏览器返回的值可能是不一样的。这一情况主要发生在默认浏览器和下载浏览器如UC、Chrome之间。 默认浏览器是安卓系统内置的浏览器长下面那个样子。而且它使用的是Webkit而不是Blink。只有在更新安卓系统的时候才能更新它。直到安卓4.3Google不再更新。 而下载浏览器都返回的是理想视口尺寸。 缩放 缩放与设备像素、CSS像素的关系 缩放是在放大或缩小CSS像素比如一个宽度为 200px 的元素无论放大还是200个CSS像素。但是因为这些像素被放大了所以CSS像素也就跨越了更多的设备像素。缩小则相反。 缩放与视口 缩放会影响视觉视口的尺寸 页面被用户放大视觉视口内CSS像素数量减少被用户缩小视觉视口内CSS像素数量增多就行了。这个道理应该是不难想的。 用户缩放不会影响布局视口 注意这是『用户缩放』后面会说开发者设置缩放的情况 缩放比例 我们在开发者工具中可以在这里查看缩放比例 这里的 0.3 是相对于理想视口的。 在下载浏览器中可以这么算理想视口与视觉视口的比 zoom level screen.width / window.innerWidth禁止缩放 meta nameviewport contentuser-scalableno设置缩放 meta nameviewport contentinitial-scale2使用initial-scale有一个副作用同时也会将布局视口的尺寸设置为缩放后的尺寸。所以initial-scale1与widthdevice-width的效果是一样的。 完美视口 解决各种浏览器兼容问题的理想视口设置 meta nameviewport contentwidthdevice-width,initial-scale1设备像素比 在谈到像素的时候讲到除了缩放屏幕是否为高密度也会影响设备像素和CSS像素的关系。 在缩放程度为100%这个条件很重要因为缩放也会影响他们时他们的比例叫做设备像素比(device pixel ratio) dpr 设备像素 / CSS像素可以通过JS得到 window.devicePixelRatio 设备像素比也和视口有关 dpr 屏幕横向设备像素 / 理想视口的宽总结 这一篇介绍了移动端适配需要掌握的知识先说明了移动端存在的两种像素然后介绍了三种视口由缩放对视口的影响引入理想视口最后说明设备想告诉比。下一篇介绍现在市面上的适配方案。转载于:https://www.cnblogs.com/jolee/p/6125872.html
