viewport

value = window. devicePixelRatio 该 Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比值。简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素。 devicePixelRatio 属性值为一个 double。 visual viewport ：可以在通过 window .innerWidth获取，表示浏览器窗口可以显示出多少个CSS像素，所以是以px为单位的.visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。 layout viewport ：布局视口，顾名思义，就是html的宽度, layout viewport 是网页的所有内容，他可以全部或者部分展示给用户 visual viewport宽度 = ideal viewport宽度 / 当前缩放值 当前缩放值 = ideal viewport宽度 / visual viewport宽度 .layout viewport 是网页的所有内容，他可以全部或者部分展示给用户 来源： https://www.cnblogs.com/chargeworld/p/12228166.html

　　最近完成了公司安排的移动web触屏开发，期间涉及到在移动设备上显示线条，最开始采用PC常用的css board属性来显示1个像素的线条，但是发现在移动设备上并不美观，参考淘宝、京东的触屏发现它们均是采用浅细的线条来显示在移动设备上。 　　以下纪录了比较方便的4种绘制0.5像素线条方式 一、采用meta viewport的方式，这个也是淘宝触屏采用的方式 常用的移动html viewport的设置如下 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 具体意思就不多提，它就是让页面的高宽度即为设备的高宽像素，而为了方便绘制0.5像素的viewport的设置如下 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" /> 这样html的宽高就是设备的2倍，此时依然使用css board为1像素的话，肉眼看到页面线条就相当于transform:scale(0.5)的效果，即为0.5像素 但是这种方式涉及到页面整体布局规划以及图片大小的制作，所以若采用这个方式还是事先确定为好 二、采用 border

闲来无事，整理下目前常见的移动端页面布局。主要有流式布局、响应式布局、固定宽度做法、设置viewport进行缩放、rem等比例适配等。下文只是个人及网络上对各布局的看法，如有不当之处或其它方法，可回复。 1、流式布局 流式布局的解决方案有不少弊端，它虽然可以让各种屏幕都适配，但是显示的效果极其的不好，因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果。在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下 显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看 到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。 流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。 2、固定宽度做法 还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计 灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题

现在移动端尺寸越来越多，如果在不同宽度的设备上完美呈现效果也是前端程序员必备的功课。 通过一天的查找资料跟以前的经验，总结了以下的方案： 1：前端样式固定用320px宽度做，左右留白，背景用颜色或者背景填充。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui"/> 图片用实际像素 background-size: 100% 100%; 2：不写宽度，所有内容以中轴线为标准，左右铺开。 3：写好网页后用JS获取屏幕宽度，然后设置body:zoom（有时字体会有问题）或者scale（只适用于单页）缩放尺寸 4：参考淘宝方案 http://www.html-js.com/article/Like-the-winter-flexible-design-and-implementation-of-the-mobile-phone-Taobao-cold 设置html的font-size和viewport来控制大小 备注：关于window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

介绍 Viewport 是一个简单的jQuery插件，为元素添加自定义伪选择器和处理程序，以便在可视窗口内外进行简单的元素检测。 使用方法 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.viewport.js" type="text/javascript"></script> 方法 $( ":in-viewport" ); $( ":above-the-viewport" ); $( ":below-the-viewport" ); $( ":left-of-viewport" ); $( ":right-of-viewport" ); $( ":partly-above-the-viewport" ); $( ":partly-below-the-viewport" ); $( ":partly-left-of-viewport" ); $( ":partly-right-of-viewport" ); $( ":have-scroll" ); 实例 黄色部分离开屏幕后显示返回按钮 var wodBackButton = function () { //元素在屏幕左侧显示返回按钮 $("#wodsHome:left-of-screen").each(function ()

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局，并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap？ 在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。 Bootstrap下载 官方地址：https://getbootstrap.com 中文地址：http://www.bootcss.com/ 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。 Bootstrap环境搭建 目录结构： bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├──

常见方式： 1. 固定宽度(320)做法：这样前端倒是爽了，可是大页面两边有留白，小页面图标文字又会缩的很小，用户体验极其不好。 2. 流式布局：其实就是用%，这样宽度倒还差不多，高度怎么搞？所以这种布局一般都是宽度自适应高度写死，显的很不协调，另外对设计也有很大的限制，另外还有兼容性方面的问题。 3. 响应式布局：说白了就是利用CSS3中的Media Query（媒介查询），喊的很火，谁用谁知道，简直累死人不要命。 4. 设置viewport进行缩放：以320 宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了。<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> 5. 利用vh、vw适配：兼容性太差。 rem是什么 rem是一个相对根元素html字体大小的单位，所以它的大小是由html的fontSize大小决定的，假如我把html的fontSize设置为10px，此时的1rem就等于10px，假如我把html的fontSize设置为100px，此时的1rem就等于100px，这也正是我们能用rem做移动端适配的根本原因，就是通过不同屏幕下改变根元素fontSize的大小