viewport | 易学教程

移动端视口设置 viewport

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

提示：这里使用的测试工具是Chrome，老版本的Chrome，有的同学没见过这个，其实就是Chrome浏览器，如果有需要，可以留个邮箱； ----------------------------------------------------------- 先来看看第一个参数： < meta name = "viewport" content = "width=device-width" > width=device-width width 设置的是viewport的宽度，这里设置 width=device-width 的意思是视口和我们的移动设备的宽度是一样的，效果如下：这里测试用的是苹果4的屏幕，320的宽度，内容是刚好铺满屏幕的；我们再换一个苹果6plus：414的宽度同样是铺满屏的，也就是适应屏幕的宽度；我们假设这里指定width=414，那么在苹果6plus下面显示是正常的，但是到了苹果4下面显示就不正常了，视口宽度414>320 ,就会出现视口横向超出了，下面的效果：所以说，进行移动端的页面的开发的时候，我们需要适配不同的屏幕，这里设置width=device-width, 第二个参数： initial-scale=1.0 < meta name = "viewport" content = "width=device-width,initial-scale

移动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

移动端开发总结（一）视口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% 。但

移动web 视口(meta name="viewport" )

阅读更多关于移动web 视口(meta name="viewport" )

demo.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> </head> <body>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure cumque sed accusantium porro sapiente totam in eius quaerat. Ad

HTML5 移动端适配问题

阅读更多关于 HTML5 移动端适配问题

适配 rem适配相关代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 8rem; height: 8rem; background:yellowgreen; } </style> </head> <body> <div id="box">box</div> </body> <script type="text/javascript"> (function(){ var head=document.head; var width=document.documentElement.clientWidth; var styleN=document.createElement('style'); styleN.innerHTML='html{font-size:'+width/16+'px !important;}'; head.appendChild(styleN); })(); <

移动端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像素是可以被硬件和软件任意调节的单位

移动端1px细线解决方案总结

阅读更多关于移动端1px细线解决方案总结

现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在那个版本没上线就迭代掉了,后面的版本针对这个问题做了些尝试, 这里总结下1px细线的处理方法移动端1px变粗的原因为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这句话定义了本页面的 viewport 的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的. 根据这篇文章 http://www.cnblogs.com/2050/p/3877280.html 的分析, 手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的,

在移动端实现1px的边框

阅读更多关于在移动端实现1px的边框

由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点所以 border: 1px 在移动端会渲染为 2px 的边框与设计图产生差异，并且没有那么美观。两种解决方法：一、transform:scale 使用伪类 :after 或者 :before 创建 1px 的边框，然后通过 media 适配不同的设备像素比，然后调整缩放比例，从而实现一像素边框首先用伪类创建边框 .border-bottom { position : relative ; } .border-bottom::after { content : " " ; position : absolute ; left : 0 ; bottom : 0 ; width : 100% ; height : 1px ; background-color : #e4e4e4 ; } 然后通过媒体查询来适配 /* 1.5倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { .border-bottom : :after { -webkit-transform: scaleY(0.7) ; transform : scaleY(0.7) ; } } /* 2倍屏 */

移动端如何真正实现1像素border

阅读更多关于移动端如何真正实现1像素border

前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？原来一直没在意，源于自己根本不是像素眼…… 今天仔细瞅了瞅原生实现的边框和CSS设置的边框，确实差距不小…… 上图是原生实现，下图是 CSS 边框，手机上对比更加明显然后，如何解决呢？搜遍整个谷歌，发现好多人早已开始研究解决方案了。到底有哪些方案，到底好不好用呢？试过才知道，把我试过的结论记录一下。一、有说用 0.5px 解决的在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retina hairlines”（retina 极细的线）：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框：额的神呐！so easy! 果真如此吗？这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多。问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设备。解决方案解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给元素添加个class。 if ( window

Webgl update region using viewport+scissor

阅读更多关于 Webgl update region using viewport+scissor

问题 I've been trying to create a multiviewport webgl application. I got everything rendering quite nice using viewport+scissor for each view. But now I would like to improve rendering and just render the view which is updated, so skip overdrawing. I've made a little demo showing the idea: http://kile.stravaganza.org/lab/js/scissor/ As I understand scissor it's suposse that it will just render the current scissor box and keep the rest of the canvas untouched. But it seems that it just keeps

订阅 viewport