怎么在手机上设置e世博的画面分辨率从哪来看

来源：蜘蛛抓取(WebSpider) 时间：2017-08-23 13:42 标签： 组态王画面分辨率
& 手机分辨率怎么看手机分辨率修改教程_图文_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
赠送免券下载特权
10W篇文档免费专享
部分付费文档8折起
每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
手机分辨率修改教程
&&手机分辨率修改教程
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩11页未读，
定制HR最喜欢的简历
你可能喜欢现在手机分辨率这么大，如何写响应式布局？ - 知乎813被浏览<strong class="NumberBoard-itemValue" title="5分享邀请回答@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
**All your high resolution styles go here**
另外，以下内容也与DPR有关：CSS
规范。图片上的
属性。视口（viewport）上面我们了解了设备的物理像素和CSS像素的区别，以及用dppx来度量具体设备上两者的比。接下来说说另一个重要概念：视口。视口在CSS里的定义是&html&元素的包含块，称为初始包含块。它的宽度是所有CSS百分比宽度推算的根源。(块级元素的宽度默认为100%)在桌面上，视口的宽度等同于浏览器窗口的宽度，高度即为浏览器窗口的高度。而在浏览器宽度通常为240px~640px的移动设备上也这样做的话，则会很不方便。为了适应为桌面浏览器设计的网站（这类网站使用固定布局，页面主体的宽度通常显式地设置在1000px上下），浏览器出现了布局视口概念。与桌面浏览器不同的是，浏览器默认的布局视口宽度与浏览器宽度完全独立。通常是768px~1024px，最常见的是980px（默认的布局视口的高度，各手机各浏览器倒是没有个准。不过反正不重要），而桌面浏览器的布局视口的尺寸就是浏览器窗口的尺寸（其实桌面浏览器根本没有“布局视口”的概念，“视口”就是浏览器的窗口）。题主在题目中提到bootstrap分别对应的是小屏幕768px，中屏幕992px，大屏幕1200px这里的768px、992px、1200px是指什么的尺寸呢？可以看到，这里使用了单位px，暗示着这些都是CSS像素，而不是设备的物理像素，因此Bootstrap对“屏幕尺寸”的定义与设备屏幕的分辨率无关。实际上，这里的尺寸指的是浏览器的布局视口尺寸。可以在meta标签内指定一个布局视口尺寸，而不是使用默认的尺寸：&meta name="viewport" content="width=320"&
然而一般不指定具体宽度而是做如下设置：&meta name="viewport" content="width=device-width，initial-scale=1"&
这里的device-width告诉浏览器，将布局视口的宽度设置为设备最理想的宽度（DPR是浏览器决定的，因此最理想宽度自然也是）。以iPhone6（设备像素：）来说，浏览器决定了DPR是2，因此最理想宽度是“750设备像素/2=375px”（布局视口高度则顺势变成了1334设备像素/2 = 667px）。宽度最理想，意味着用户无需缩放页面，因此很多手机浏览器（不含safari）在这样的设置下，不再具有300ms的click时延。该时延的本意就是用来判断用户是要click还是双击缩放页面。此处盗个图，红箭头指向的即DPR不同的设备有不同的理想宽度（同一设备的不同浏览器也有可能拥有不同的理想宽度，尽管这种现象极为极为罕见），且随着设备的横放竖放也会有所改变，因此通常不指定特定的尺寸，而是使用device-width进行自适应。宽度为理想宽度的布局视口叫做“理想视口”当设备的横放、竖放方式被改变时，最佳DPR不变，布局视口宽度从"手机宽度/最佳DPR"变为"手机长度/最佳DPR"，且因布局视口宽度有变，浏览器会进行一次重排。不过iOS上
的Safari在旋转时不会改变布局视口的宽度（因此DPR提高了），除非在meta指令里设置了initial-scale=1媒体查询中，min-width、max-width的查询即是对布局视口宽度的查询。因此若想通过媒体查询来实现响应式设计，应当设置一个设备的布局视口宽度，否则移动浏览器使用默认布局视口宽度（大都是980px）会使针对视口宽度的媒体查询无功而返。另有min-device-width、max-device-device的查询（本质上是screen.width的查询），对桌面浏览器的意义不大。在移动浏览器上，是对不随着设备的横屏、竖屏而改变的设备“最理想宽度”的查询。例如，iPhone6的“device-width”永远是375px，而它的“width”会随着横屏竖屏而改变。总结进行响应式的设计大概有以下几个注意点：1. 通过meta标签指定布局视口而不是使用默认的、宽度通常为980px的布局视口2. 通过媒体查询或者document.documentElement.clientWidth来根据布局视口的宽度的不同来做设计3. 通过媒体查询或者window.devicePixelRatio来根据DPR的不同来提供分辨率不同的图像33317 条评论分享收藏感谢收起&meta name="viewport" content="width=800, initial-scale=1"&
所以media query更需要的是反应viewport尺寸的width，min-width，max-width，而不是反应设备本身的尺寸device-width等等，除非你的应用确实需要针对设备本身的尺寸布局。即时如此，写media query的时候，仍然不推荐px，pt这样的”绝对‘值，而会用适应性更好的的rem，em，比如@media (min-width: 10rem) and (max-width: 20rem) { ... }
假设你的基础font-size是16px，那么上面的规则就会作用于介于160至320之间的宽度。假如你的基础字体大小调整为14px，那么这条规则就会作用与140至280之间，通常这样的视觉效果给人更一致的感觉。所以“响应式”布局实践的出发点是“相对”尺寸，目的是让一个实现能够不依赖于某个具体设备。222 条评论分享收藏感谢收起

我要回帖

更多关于 组态王画面分辨率 的文章

 

随机推荐