视口 | 易学教程

在移动端避免使用100vh

阅读更多关于在移动端避免使用100vh

在移动端避免使用100vh CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度: 100vh ，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。 100vh 在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免 100vh ，而是依赖 javascript 来设置高度，以获得完整的视口体验。核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功a能，地址栏有时可见，有时隐藏，改变了视口的可见大小。这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为隐藏地址栏的浏览器高度。结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了 100vh 的初衷。如下所示：当地址栏可见时，由于移动浏览器不正确地将 100vh 设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应该在屏幕底部的按钮被隐藏了。更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部，因此用户体验是很糟糕的。一个好的解决方案: window.innerHeight 解决这个问题的一种方法是依赖javascript而不是css。当页面加载时，将高度设置为 window.innerHeight 将正确地将高度设置为窗口的可见部分

HTML文档坐标和视口坐标

阅读更多关于 HTML文档坐标和视口坐标

文档坐标和视口坐标　　视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。例如，在文档坐标中如果一个元素的相对于文档的Y坐标是200px，并且用户已经把浏览器向下滚动了75px，那么视口坐标中元素的Y坐标为200px – 75px = 125px。　　如何获取浏览器滚动条的位置?Window对象的pageXOffset和pageYOffset属性在所有浏览器中提供这些值，除IE8以及更早的版本。IE和所有现代浏览器也可以通过scrollLeft和scrollTop属性获取滚动条位置。　　下面代码的getScrollOffsets方法获取滚动条位置： view source print ? 01 //以一个对象的x和y属性放回滚动条的位置 02 function getScrollOffsets(w){ 03 w = w || window; 04 //除了IE 8以及更早的版本以外，其他浏览器都支持 05 if (w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset}; 06 //对标准模式下的IE 07 var d = w.document; 08 if (document.compatMode == "CSS1Compat" ) 09 return {x: d

响应式手机网站——视口约束&媒体查询

阅读更多关于响应式手机网站——视口约束&媒体查询

1.http://mediaqueri.es/ 响应式网站 2.用谷歌浏览器模仿各种移动设备。 3.设备检测： 1）device.js库（图片截自传智视频） 2）页面跳转：window.location=URL; 4.检测屏幕更改页面的CSS样式：（有点像hao360换肤的效果）（图片截自传智视频） 5.window对象的事件： 1）onload加载完成 2）onresize 尺寸更改 3）onscroll 滚动滚轮 6.视口比如IPhone手机返回的视口宽度大于它实际的宽度的一个现象如执行如下代码，就会返回窗口的宽度： <!DOCTYPE html > <html lang= "en" > <head> <meta charset= "UTF-8" > <title> 媒体查询 </title>   </head> <body> <h1 id= "test" ></h1> <script type= "text/javascript" > document .

谈谈个人对移动端视口的理解

阅读更多关于谈谈个人对移动端视口的理解

1.笔者发现，同样的一个网页，在电脑端显示清楚，但是如果在移动端没有做自适应，有些情况下同一个网页在移动端字体会变得很模糊。在开发移动端应用的时候，习惯性的我们会加上一下meta标签。 < meta name= "viewport" content= "width=device-width,initial-scale=1.0" user-scalable= "no;" > 2.为什么需要加上这个标签？（1）首先谈谈自己对于Layout viewport(布局视口）的理解个人对于布局视口的理解，就是设备当前选择的分辨率。默认情况下，如果同一个电脑端网页要在移动端显示IOS，Android都将这个视口设为980px，设想一般手机的分辨率是400*600px左右，如果要在该手机上呈现一个98 0px的视口，那么显然这个网页会变得模糊不清。（2）什么是Visual viewport(视觉视口）视觉视口，个人认为视觉视口与物理像素有关，一般的手机设备物理像素是大大的高于分辨率的，也就是说视觉视口的大小是远远大于布局视口，下面是一段官方对于视觉视口的解释： visual viewport（视觉视口）备物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。例如iPhone的物理像素： iPhone5 ：640 * 1136 iPhone6

移动端适配、移动端事件，理想视口

阅读更多关于移动端适配、移动端事件，理想视口

禁止滚动条取消滚动条的默认样式：html{height:100%;overflow:hidden;} body{height:100%;overflow:hidden;} 并在js中写入：document.addEventListener('touchstart',function(event){ event.preventDefault();}) 移动端事件 changedTouches 触发当前事件手指的列表（默认是一个）【经常使用】（当前事件） targetTouches 触发当前目标元素上的手指列表（可以是多个）（当前元素） touches 当前屏幕上的手指列表（可以是多个）（屏幕上的手指数）使用时使用的是 changedTouches[0]; eg. 获取event事件中的clientX属性__ event.changedTouches[0].clientX 在移动端操作必做的步骤： 1. <meta name="viewport" content="width=device-width,initial-scale=1.0 /> 2. * {margin:0; padding:0;} (某些Chrome不能取消默认行为时 *{action-touch:none;}) html,body{height:100%; overflow:hidden;} 3.

移动端的视口设置

阅读更多关于移动端的视口设置

视口的设置 1 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 以上代码常见于移动端设置，他的作用是使网页的宽度自动适应手机屏幕的宽度。下面对每个属性的详细说明：属性名取值描述 width device-width或正整数定义视口的宽度，单位为像素，一般为device-width：表示宽度为设备屏幕的宽度 height device-width或正整数定义视口的高度，单位为像素，一般不用写 initial-scale [0.0-10.0] 定义初始缩放值，一般设置为1.0 minimum-scale [0.0-10.0] 定义放大最大比例，它必须小于或等于maximum-scale设置 maximum-scale [0.0-10.0] 定义缩小最小比例，它必须大于或等于minimum-scale设置 user-scalable yes / no 定义是否允许用户手动缩放页面，默认值 yes 注意： viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 =

移动web——viewport（视口）

阅读更多关于移动web——viewport（视口）

1.手机拥有了浏览器的初期并没有专门为移动设备设计页面，造成的直接结果就是访问的页面是直接将电脑页面进行缩放，操作起来十分不便，viewport就是用来解决这个问题的 2.viewport视口属性（该属性只有在移动端浏览器上才有用）：移动设备上用来显示网页的区域（如果把移动该设备的浏览器当做相框的话，viewport就相当于相框中的画，可能会比相框小/大，需要的就是刚好一样大）（1）修改viewport：可以通过meta标签去修改viewport的值，防止出现滚动条移动web的常见设置： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ·name = 'viewport'告诉浏览器这个meta标签设置的是viewport属性 ·content设置的是viewport属性的值（属性的赋值：属性名=属性值，其中属性名不是乱写的而是有固定的取值） ·width：宽度，其属性值device-width表示的是设备的宽度（不需要给单位）如果设备的屏幕大小比设备的视口大小要大就是能够正常显示的 ·height：高度一般不设置，会让内容来撑大 initial-scale=1.0 --> 视口默认的缩放比例 maximum

移动端视口

阅读更多关于移动端视口

1.什么是视口? 视口简单理解就是可视区域大小我们称之为视口在PC端，视口大小就是浏览器窗口可视区域的大小（窗口多大，可视区域/视口就多大）在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980 2.为什么是980而不是其他的值? 因为过去网页的版心都是980 乔布斯为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980 后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980 3.移动端自动将视口宽度设置为980带来的问题——内容被缩小虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小 4.如何保证在移动端不自动缩放网页的尺寸?——视口大小同可视区域大小通过meta设置视口大小 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-width 设置视口宽度等于设备的宽度 initial-scale=1.0 初始缩放比例, 1不缩放 maximum-scale：允许用户缩放到的最大比例 minimum-scale：允许用户缩放到的最小比例

移动端开发总结（一）视口viewport总结

阅读更多关于移动端开发总结（一）视口viewport总结

转载链接：移动端开发中，关于适配问题的一点总结(一) 视口布局视口layout viewport 视觉视口visual viewport 理想视口缩放一个重大区别最小缩放和最大缩放分辨率物理分辨率dpi 设备像素比 dpr dipsdevice-independent pixels 例子 meta视口完美的meta 视口视口 < meta name = "viewport" content = "width=device-width" /> 我们一直在使用这行代码，但是这样写有什么用？加了这个和不加这个到底有什么区别？要解释这个问题，我们首先要了解一个概念 - 视口在解释视口之前，我们先回顾一下CSS的基础： css中，在没有声明任何宽度时，每个块级元素的默认宽度都是100% 。那这个100% 是相对于什么的100% 呢？对了，是它父元素的100% 。每一个css百分比都是根据它的父元素的宽度来进行计算的，所以宽度为父元素宽度的100% ，本质是： body , html { //没有制定宽度，默认100%} div .aside { width : 20 % ; } 这里，div.aside占用了它的父元素 body 宽度的100％，但我们没有给body 定义宽度，因此，它占用了它的父元素，也就是html 宽度的100% 。但

移动端1px像素问题及解决办法

阅读更多关于移动端1px像素问题及解决办法

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。一、像素的理解像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。 1、device pixels 设备像素：显示屏幕的最小物理单位，每个dp 包含自己的颜色、高宽等，不可再细分。设备像素是在设备出厂是设定的，设备一旦造出来就不会变大小和数量。官方在产品说明书上写的1920x1080就是说的物理像素。 2、dpi 设备独立像素：dpi（Dots Per Inch，每英寸点数）是一个量度单位，指每一英寸长度中，取样、可显示或输出点的数目。每英寸的像素，类似于密度，即每英寸的像素点数量。 3、css pixels 就是CSS和JS所理解的像素单位，它跟设备屏幕的像素没必然关系，比如windows的桌面显示器，当你修改显示器的硬件分辨率，比如把1920的分辨率改成1024分辨率，你会发现网页里的图形和字体变得很大很大的，同样的显示器，原本能显示全部网页，现在只能显示一半宽度，也就是说CSS像素变大了。所以，CSS像素是可以被硬件和软件任意调节的单位

订阅视口