摘要：注根据的传统，如果出现一些比较严重的，此功能很有可能会被。之前有过团队为了让变得更加完美而改变的传统特性，造成大量后又的事件。结论因为某些手机屏幕很小，所以在手机上慎用转自什么是详解及在手机上的应用
viewport是专为手机浏览器设计的一个meta标签； 有些屏幕很小有智能手机，但分辩率却可以做得很大，比如小米４的默认分辨率为：1920*1080，比许多电脑桌面的都还大，传统桌面网站直接放到手机上阅读时，界面就会显得非常小，阅读体验就很差，就样就需要一种将原始视图在手机上放大的机制，使用viewport标签可以解决这个问题，如
width=device-width: 表示此宽度不依赖于原始象素(px)，而依赖于屏幕的宽度，如iphone 4（3.5寸）屏幕的大小相当于电脑屏幕上的320px显示的效果
下图为设置了viewport标签后在手机上的显示效果，注意右侧手机每格代表50个象素，目测为375px，即可能是iphone 6之类机型尺寸显示的效果：
此外viewport port标签还有一些其它属性：
initial-scale：初始缩放比例
maximum-scale：允许缩放的最大比例
minimum-scale：允许缩放的最小比例
user-scalable：是否允许手动缩放
你也可以给width设置一个值，这意味着宽度属性实际上转化为一个最小宽度视图。例如，如果你的布局至少需要500像素宽，那么你可以使用下面的标记。当屏幕宽度大于500像素时，浏览器将扩大视图（而非放大），以适合屏幕：
Chrome 在最新版是更改了一些Viewport的显示机制，参考 Matt Gaunt 的博客
在 In Chrome M40 ，关于viewport有一个微秒的变化，很可能会给用户带来很大的不同。
Rick Byers（Google工程师，负责Chromebook Pixel）这样描述virtual viewport：将“viewport”的概念一分为—，即：“layout viewport 布局视口”（固定位置）和“视觉视口”（用户实际看到的）。
做这样的改动是因为，一些之前相对当前窗口位置固定(position: fixed) 的悬浮DIV，比如有些始终在显示在顶部而不随页面滚动的标题栏，因为放大后用户又无法拖动他们，就有可能造成用户无法点击到在县浮框后面的链接，比如video.js的悬浮标题栏（注：现在此网站已取消悬浮），当用户放大并滑动后，标题栏始终停留在左侧：
当启用virtual viewport（特定版本的Chrome）以后的，悬浮框就可以拖动了，用户终于可以点到后面的链接了：
virtual viewport不需要添加额外的标签。通过这篇Chrome issues的讨论，可以知道除了Android WebView，其他设备都默认启用了virtual viewport。
注：根据Google的传统，如果出现一些比较严重的BUG，此功能很有可能会被Revert。之前有过Chrome团队为了让js变得更加“完美”而改变js的传统特性，造成大量BUG后又revert的事件。
结论：因为某些手机屏幕很小，所以在手机上慎用 position: fixed
转自ourjs - kris - 什么是Viewport Meta（width详解）及在手机上的应用
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/55205.html
摘要：也发现了这个问题，并且适时的出现，它提出了一个方案用来解决这个问题。很明显，的尺寸不会是一个固定的值，甚至每款设备都可能不同。而完美视口也是通过的某种设置来达到。特性通常情况下，有以下种设置。用于指定用户能够放大的比例。 前言 这次想聊聊移动开发相关的事。是的，你没有看错，一句话就可以开始你的移动前端开发。 你心里一定在想，什么话这么酷，能够瞬间带入到移动前端开发的世界。 但其实它一点...
摘要：在端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。本文主要讨论移动端中的视口。因此，引入了布局视口视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。 在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。...
摘要：在端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。本文主要讨论移动端中的视口。因此，引入了布局视口视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。 而移动...
摘要：话不多说，上正题，本文主要是加深对个视口的了解，以及相关的属性作用于哪些视口上，希望对大家有帮助吧概括总结布局视口最有用，用到的几乎都是这个。 标题想了半天，最后潦草的取了【深入理解*】，可能有些童鞋们看完觉得没有深入理解，那。。。 话不多说，上正题，本文主要是加深对viewport3个视口的了解，以及相关的属性作用于哪些视口上，希望对大家有帮助吧 概括总结：布局视口最有用，用到的几乎...
摘要：正文概念本次要谈的移动不是，只是很普通的移动端的界面。默认行为作为之前开发端的人员，第一反应就是如何把那么大的界面内容展现到手机小小的屏幕上。就是在显示多行文字的时候，可能需要在自己期望显示多少行之后，省略后面的文字，然后以。。。 前言 开发生涯总是丰富多采，工作多年，不同领域还是逃不过雨露均沾，之前开发过android，微信，ios，web网站也玩过。但是对于移动web这一块，确实没...
阅读 787·2021-11-23 09:51
阅读 1907·2021-09-29 09:32
阅读 2579·2021-08-23 09:44
阅读 463·2019-08-30 15:54
阅读 1310·2019-08-30 13:53
阅读 2966·2019-08-29 16:54
阅读 2368·2019-08-29 16:26
阅读 1041·2019-08-29 13:04
