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中定义了viewport meta标签，它的作用就是创立一个虚拟的窗口(viewport)，并且这个虚拟窗口的辨论率接近于桌面显示器，Apple将其定位为980px。也就是当我用阅读器中翻开任意的一个页面，这个页面的宽度为980px，而不是屏幕的物理宽度。
以一代iphone6下的Safari来说就是：
在iphone6的375px物理屏幕上——视觉窗口(visual viewport)，创立出了一个980px的虚拟窗口——规划窗口(layout viewport)，在视觉窗口(visual viewport)中我们可以拖动横向竖向滑动条或者放大缩小网页，来到达最好的阅读结果(相似桌面阅读器)；而规划窗口(layout viewport)用来配合CSS渲染规划，例如当我们设定一个容器的宽度为100%时，这个容器的实际值为980px而不是375px。如此一来大部分 网页就能以缩放的情势正常的显示在手机屏幕上了。
虚拟窗口980px在屏幕上的实际尺寸是多大?
iphone6屏幕的物理像素是375px，虚拟窗口的宽度是980px，这两者的1px大小是不想等，说得更简便一点就是此px非彼px，一个是用来形容实际窗口即视觉窗口的大小，一个是用来形容虚拟窗口的大小，没什么相关的。(可以通过chromn来检查页面在pc阅读器和手机阅读器的宽度。)
safari阅读器、opera阅读器、chromn阅读器 虚拟窗口大小默许都是980px，火狐阅读器默许开启手机模式，其虚拟窗口宽度就是设备宽度。
智能手机创立出虚拟窗口后，又显现一个问题，pc端网页在手机阅读器翻开后不管是字体还是其它元素都显得比力小，看起来比力吃力，动手缩放又显得比力费事。apple又弄出个viewport用来调整虚拟窗口的大小，一样我们会这样写
<meta name="viewport" content="width =device-width,initial-scale=1,user-scalable=1">
device-width表示设定虚拟窗口的大小同设备的物理像素宽度相等。这样利便我们使用media写一个专门适配移动端的页面，这样我们就可以在移动端看到适宜大小的页面。
以上就是html5 viewport总结讲述的具体内容，更多请关注百分百源码网其它相关文章！
