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

移动浏览器的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″>

上一篇:CentOS 7 nginx+tomcat9 session处理方案之session复制


下一篇:PHP获取数组最后一个元素的键和值