成都创新互联网站制作重庆分公司

什么是html5viewport-创新互联

什么是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用来调整虚拟窗口的大小,一般我们会这样写

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

关于什么是html5 viewport问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:什么是html5viewport-创新互联
网站链接:http://cxhlcq.com/article/ddopsp.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部