使用视 meta 标签来控制手机浏览器布局

Posted 2020-08-26

移动浏览器的Fennec一样呈现在一个虚拟的“窗口”页面（视），通常比屏幕宽。
所以他们不需要去挤每个页面布局到一个小窗口（这会破坏许多非移动优化的网站） 。用户可以平移和缩放才能看到页面的不同区域。

移动Safari浏览器推出了“视口元标记”，让Web开发人员控制视口的大小和规模。
许多其他移动浏览器都支持这个标签，虽然它不是任何Web标准的一部分。
苹果公司的文档做得很好解释如何Web开发人员可以使用这个标签，但我们不得不做一些侦探工作，以找出究竟是如何实现它的Fennec的。
例如，Safari的文件说，内容是“逗号分隔的列表”，但现有的浏览器和网页使用逗号，分号，并作为分隔空间的任意组合。

了解更多关于在不同的移动浏览器的视口两个视口的故事在quirksmode.org。

典型的移动优化的网站包含类似以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

在宽度属性控制视口的大小。它可以被设置为一样的像素的具体数量宽度= 600或为特殊值设备宽度是在CSS像素在屏幕中的100％的比例的宽度的值。
（有相应的高度和器件高度值，这可能是基于视高度改变大小或位置元素的网页很有用。）

在最初的规模属性控制在首次加载页面缩放级别。的最大尺度，最小规模，并且用户可扩展属性控制用户如何允许放大的页面或缩小。

像素是不是像素
iPhone和许多流行的android手机有3至4英寸（7-10厘米）屏幕，320-480像素（?160 DPI）。
Firefox浏览器运行的Maemo的诺基亚N900，它具有相同的物理尺寸，但480-800像素（?240 DPI）。
正因为如此，小狐的最后版本显示得比iPhone或Android许多网页约三分之一较小（在实际的物理尺寸）。
这引起了很多触控优化网站的可用性和可读性问题。彼得·保罗·科赫写了关于这个问题的像素是不是一个像素。

Fennec的1.1 Maemo平台将用于每一个CSS 1.5硬件像素“像素”，Android的基于WebKit的浏览器的马首是瞻。
这意味着，与页面的初始规模= 1将呈现在接近小狐相同的物理尺寸为Maemo操作，移动Safari浏览器为iPhone，并同时在Android浏览器HDPI和MDPI手机。
这是与相一致的CSS 2.1规范，其中表示：

如果输出设备的像素密度从一个典型的计算机显示屏的非常不同，则用户代理应该重新调整像素值。
建议在象素单元指的是整个数目设备的像素的最近似于参考像素。所以建议参考像素为一个像素的与96DPI的象素密度和来自手臂的长度的读者的
距离的设备上的可视角度。
对于Web开发人员来说，这意味着320像素是在规模= 1肖像模式全宽，在所有上述的手持设备，它们可能规模的布局和相应的图像。
但请记住，并不是所有的移动设备都是相同的宽度; 你也应该确保你的网页在横向模式运作良好，并在诸如iPad和Android平板电脑更大的器件。

在240 dpi的屏幕，配页初始规模= 1有效地将双方的Fennec和Android的WebKit放大到150％。
他们的文字将是顺利和清晰的，但他们的位图图像可能不会采取全屏幕分辨率的优势。
要得到这些屏幕上的清晰的图像，Web开发人员可能需要设计的图像-或者整个布局-在他们的最终大小的150％（或200％，支持320 dpi的设备，
如Retina显示屏iPhone），然后扩展下来使用CSS或视属性。

缺省比值取决于显示密度。上与密度的显示小于200DPI，该比率为1.0。上200和300dpi密度显示，该比率为1.5。
对于密度超过300dpi的显示器中，比率是整数地板（密度 /建议使用150dpi分辨率）。
注意，只有当视口比例等于1否则缺省比值是真实的，CSS像素和装置的像素之间的关系取决于当前缩放级别。

许多站点设置其视口“WIDTH = 320，初始规模= 1”精确到适合纵向模式的iPhone显示屏。
如上所述，这引起的问题时的Fennec 1.0呈现站点，特别是在横向模式。为了解决这个问题，1.1的Fennec将扩大视口的宽度，
如果有必要在要求的规模，以填补屏幕。这与Android和移动Safari浏览器的行为，并且是像iPad这样的大屏幕设备特别有用。
（阿伦派克的选择为iPad网站视口对Web开发人员一个很好的解释。）

对于设置一个初始或最大规模的页面，这意味着宽度属性实际上转化为一个最小的视口宽度。
例如，如果你的布局需要的宽度至少500像素，那么你可以使用下面的标记。当屏幕超过500像素宽，浏览器将扩大视（而非放大）以适应屏幕：

<meta name="viewport" content="width=500, initial-scale=1">
小狐1.1还增加了对支持的最小规模，最大规模和用户可扩展的，具有默认值和类似的限制Safari的。
这些性质影响初始比例和宽度，以及在缩放级别限制的改变。

移动浏览器在处理方向的变化略有不同。例如，从纵向改变为横向时，而不是布置在网页，因为它会如果最初装在横向移动Safari往往只是缩放的页面。
如果Web开发人员希望在iPhone上的切换方向时，他们的规模设置，以保持一致，必须要增加一个最大规模的值，以防止这种变焦，具有阻止用户在放大
的有时是有害的副作用：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">
这是没有必要的Fennec; 当设备改变方向，小狐更新视口大小，页面布局和javascript / CSS属性，如设备的宽度，根据其新的窗口尺寸。

常见的视口大小手机和平板设备
如果想知道什么手机和平板设备有哪些视口的宽度，还有的完整列表在这里手机和平板电脑视窗的大小。
这使信息，如在纵向和横向视口宽度以及物理屏幕尺寸，操作系统和装置的像素密度。

viewport：词典原义是视角、视口、检测区。
而网页中meta标签的viewport属性是什么含义、起着什么作用，下面简单讲述下，并实例说明。

viewport属性各个参数：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

width：viewport 的宽度，可以指定为一个像素值，如：600，或者为特殊的值，如：device-width （设备的宽度）。

height：viewport的高度。

initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。

maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0。

minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0。

user-scalable：浏览者是否可以手动缩放，yes或no。

对于手机浏览器浏览页面，常对viewport进行如下设置即可：

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1″>