html5 viewport总结讲述

　　本篇文章是关于HTML5中的viewport的一个讲述，对于HTML5中viewport不太熟悉的同学，我们可以一起看看本篇文章！来详细的了解一下html5中的viewport

 

　　总结下来无非围绕三个问题:

 

　　1、为什么要设置虚拟窗口

 

　　起初是为了使得虚拟窗口的分辨率和pc端接近，这样虚拟窗口依然能够完整显示页面内容，只是页面内容比较小，需要通过手动缩放的方式来看清楚页面。

 

　　2、添加viewport有什么用

 

　　添加viewport是为了方便移动端的优化。设置虚拟窗口宽度为device-width，与设备的物理像素相同，这样我们就可以通过media来控制页面移动界面的显示方式。

 

　　3、设备屏幕宽度(即设备的物理像素)与分辨率的关系

 

　　以iphone6为例，其屏幕实际大小为375*667，然而其分辨率达到750*1334,这两者是不同的概念。

 

　　物理尺寸是指屏幕的实际大小。大的屏幕同时必须要配备高分辨率，也就是在这个尺寸下可以显示多少个像素，显示的像素越多，可以表现的余地自然越大。两台手机的屏幕大小差不多大，却一个只能显示两行汉字，另一个则可以显示五行汉字，抛开字体大小差别，关键就是屏幕的分辨率，后者分辨率大一些，自然在同样字体大小下可以显示更多行的汉字。彩屏手机的确好，没有足够大分辨率的屏幕表现，再高的颜色质量又有何用。

 

　　下面我们来解释一下viewport的作用和它怎样与media结合。

 

　　一个50像素宽的p在pc浏览器显示可能刚好，但是如果在手机浏览器显示就会显得过大。怎么解决这个问题呢？Apple找到了一个办法：在移动版(iOS)的Safari中定义了viewportmeta标签，它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器，Apple将其定位为980px。也就是当我用浏览器中打开任意的一个页面，这个页面的宽度为980px，而不是屏幕的物理宽度。

 

　　以一代iphone6下的Safari来说就是：

 

　　在iphone6的375px物理屏幕上——视觉窗口(visualviewport)，创建出了一个980px的虚拟窗口——布局窗口(layoutviewport)，在视觉窗口(visualviewport)中我们可以拖动横向竖向滑动条或者放大缩小网页，来达到最佳的浏览效果(类似桌面浏览器)；而布局窗口(layoutviewport)用来配合CSS渲染布局，例如当我们设置一个容器的宽度为100%时，这个容器的实际值为980px而不是375px。如此一来大部分网页就能以缩放的形式正常的显示在手机屏幕上了。

 

　　虚拟窗口980px在屏幕上的实际尺寸是多大?

 

　　iphone6屏幕的物理像素是375px，虚拟窗口的宽度是980px，这两者的1px大小是不想等，说得更简单一点就是此px非彼px，一个是用来形容实际窗口即视觉窗口的大小，一个是用来形容虚拟窗口的大小，没什么相关的。(可以通过chromn来检查页面在pc浏览器和手机浏览器的宽度。)

 

　　safari浏览器、opera浏览器、chromn浏览器虚拟窗口大小默认都是980px，火狐浏览器默认开启手机模式，其虚拟窗口宽度就是设备宽度。

 

　　智能手机创建出虚拟窗口后，又出现一个问题，pc端网页在手机浏览器打开后无论是字体还是其它元素都显得比较小，看起来比较吃力，动手缩放又显得比较麻烦。apple又弄出个viewport用来调整虚拟窗口的大小，一般我们会这样写

 

　　<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=1">

 

　　device-width表示设置虚拟窗口的大小同设备的物理像素宽度相等。这样方便我们使用media写一个专门适配移动端的页面，这样我们就可以在移动端看到合适大小的页面。





本文转载自中文网