我已经创建了一些响应式站点,但对于响应式站点开发还是相当陌生的。在我的CSS中,我有99%的值以em或百分比表示。我正在使用媒体查询(最大宽度和最大设备宽度)进行布局更改。我还没有包含viewport meta标签,它在iOS,我测试过的许多Android手机和平板电脑以及所有桌面浏览器上都可以完美运行。
添加元标记会破坏我的网站。我是在做错什么,还是在做正确的事情,以至于不需要包含它?我对为什么这似乎是一种最佳实践感到困惑,因为它破坏了我的工作。
我想念什么吗?
在台式机操作系统上,浏览器视口是固定数目的像素宽,并且网页内容按原样呈现在其中。
从iOS上的Safari(或当时我们称为iOS的任何版本)开始,移动浏览器的视口一直是“虚拟的”。尽管视口仅可能(例如)占用界面中320个物理像素的空间,但浏览器会创建一个更大的“虚拟”视口(我认为iOS上默认为980像素),并在那里显示内容,然后缩小该虚拟视口,直到它适合设备屏幕上可用的实际物理像素为止。
视口meta标记可让您告诉移动浏览器该虚拟视口的大小。如果您实际上并未更改网站的移动设计,这通常很有用,并且通过更大或更小的虚拟视口可以更好地呈现该外观。(我相信选择980像素作为默认像素是因为它在2007年渲染很多备受关注的网站方面做得很好;对于任何给定的网站,不同的值可能会更好。)
就个人而言,我总是使用<meta name="viewport" content="width=device-width, initial- scale=1">虚拟视口来匹配设备尺寸。(请注意,initial-scale=1使虚拟视口适应iOS上的横向模式似乎是必需的。)这使移动浏览器的行为类似于台式机浏览器始终具有的行为,这就是我所习惯的。
<meta name="viewport" content="width=device-width, initial- scale=1">
initial-scale=1
没有视口元标记,您的网站将呈现到设备的默认虚拟视口中。我认为这 不一定 是问题,特别是如果您所用的单位都是em或百分比。但是,如果您需要在任何时候考虑像素,可能会有些混乱,尤其是因为不同的浏览器可能具有不同大小的默认虚拟视口。如果后续的维护人员不了解该方法,也可能会造成混淆。
我想您将基本字体大小设置得很大,这样可以看清楚吗?您可以链接到您这样创建的网站之一,以便我们查看示例吗?