viewport

网格视图 很多网页都是基于网格设计的，这说明网页是按列来布局的。 使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。 响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。 viewport viewport 是用户网页的可视区域。 手机浏览器是把页面放在一个虚拟的" 窗口" （viewport ）中，通常这个虚拟的" 窗口" （viewport ）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> width ：控制 viewport 的大小，可以指定的一个值，如果 600 ，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height ：和 width 相对应，指定高度。 initial-scale ：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale

1、 piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示？ iphone5分辨率640*1136 逻辑像素与物理像素的关系 px逻辑像素：浏览器使用的抽象单位 dp，pt物理像素：设备无关像素 dpr：设备像素缩放比 计算公式：1px = (dpr)^2 * dp iphone5的 dpr = 2； DPI:打印机每英寸可以喷的墨汁点（印刷行业） PPI:屏幕每英寸的像素数量，即单位英寸内的像素密度 目前，在计算机显示设备参数描述上，二者意思一致 计算公式：以iphone5为例：ppi = √（1136^2 + 640^2）/4 = 326ppi（视网膜retina屏） 注意：单位为硬件像素（物理像素），非px PPI越高，像素数越高，图像越清晰。但可视度月低（小），系统默认缩放比越大。 retina屏（高清屏）：dpr都是>=2。 2、 viewport 手机浏览器默认为我们做了两件事情： ① 页面渲染在一个980px（ios）的viewport ② 缩放 为什么要有viewport？ 一个300多像素的屏幕，放一个1000多像素的页面，会混乱，所以要先虚拟一个980像素的页面，然后进行缩放。 度量|视口 visual viewport ==== 窗口缩放scale 布局 layout viewport 设计移动web

视口viewport 1、在桌面端的浏览器的宽度有肯能是很大的，如果设置了一个很大的值，那么在移动端中的浏览器显示的时候会有横向移动的拖拽条，为了避免出现这样的横向拖拽条，我们每次都要页面的宽度就是移动设备浏览器的宽度 2、移动设备的浏览器（或App中的webview）好比是相框，viewport就是相框中的画，如果画与相框一样大是不是很完美？ 3、快捷键：meta：vp + tab，使用了meta可以将视口调整到与设备大小一样 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 3、参数解释 name：声明属性是viewport属性 content：属性具体设置的值 width：宽度，一般是设备宽度device-width height：高度，一般不设置让其自动撑大 initial-scale：视口默认的缩放比例 一般默认设置的是1.0 user-scalable：设置是否支持缩放 一般设置的是 no、false、0 maximum-scale：最大的所放值 1.0 minimum-scale：最小的所放值 1.0 移动端样式 1、点击高亮效果：移动端默认点击会附带高亮效果，可以将此效果变成透明 a, button,

移动设备升级到iOS10了，发现了自带的Safari浏览器不再识别meta viewport 了。以前我们都是用这个标签来让浏览器禁用缩放的。万恶的Apple~~ 在iOS10之前都是通过 < meta name = "viewport" content = "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" > 来强制不让手机浏览器缩放的，但是升级到iOS10后Safari不再识别这个meta标签。所以得用js来hack一下： 禁用双指缩放： document.documentElement.addEventListener( 'touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); 禁用手指双击缩放： var lastTouchEnd = 0; document.documentElement.addEventListener( 'touchend', function (event) { var now = Date.now(); if (now - lastTouchEnd <= 300) {

Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 // maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 // user-scalable 是否允许手动缩放 //二、JS动态判断 var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 [javascript] view plain copy //一、HTML页面结构 <meta name= "viewport" content= "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 // maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 // user-scalable 是否允许手动缩放 //二、JS动态判断 var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var

转：http://www.open-open.com/lib/view/open1449325854077.html Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 // maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 // user-scalable 是否允许手动缩放 //二、JS动态判断 var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (

Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 // maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 // user-scalable 是否允许手动缩放 //二、JS动态判断 var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp

3 月，跳不动了？>>> 先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位： px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi…… 接下来分类给大家介绍下： ① 什么是绝对长度单位？什么是相对长度单位？ ② 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ ③ 什么是ppi、dpi、dp、dip、sp、px？他们之间的关系是什么？ ④ 什么是mdpi、hdpi、xdpi、xxdpi？如何计算和区分？ 1、什么是绝对长度单位？什么是相对长度单位？ 绝对长度单位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。in、cm、mm和实际中的常用单位完全相同。pt是标准印刷上常用的单位，72pt的长度为1英寸。pc也是印刷上用的单位，1pc的长度为12磅。绝对长度单位，虽然理解起来很容易，但是在网页的设计中很少用到。所以我们就忽略它们吧。 2、什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ 屏幕尺寸： 指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。 屏幕分辨率： 指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。

1、Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 2、引入Vue.js 初学，所以直通过CDN服务器引入vue库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue1</title> <!-- 通过CDN服务器引入vue库 --> <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> </head> 3、vue在js中语法 <script> var vm = new Vue({ el : "#app", data : { msg : "hello world!!!",