当前位置: 首页 > 面试题库 >

视口meta标签真的必要吗?

殳毅
2023-03-14
问题内容

我已经创建了一些响应式站点,但对于响应式站点开发还是相当陌生的。在我的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上的横向模式似乎是必需的。)这使移动浏览器的行为类似于台式机浏览器始终具有的行为,这就是我所习惯的。

没有视口元标记,您的网站将呈现到设备的默认虚拟视口中。我认为这 不一定
是问题,特别是如果您所用的单位都是em或百分比。但是,如果您需要在任何时候考虑像素,可能会有些混乱,尤其是因为不同的浏览器可能具有不同大小的默认虚拟视口。如果后续的维护人员不了解该方法,也可能会造成混淆。

我想您将基本字体大小设置得很大,这样可以看清楚吗?您可以链接到您这样创建的网站之一,以便我们查看示例吗?



 类似资料:
  • 本文向大家介绍WordPress删除不必要的meta标签,包括了WordPress删除不必要的meta标签的使用技巧和注意事项,需要的朋友参考一下 WordPress默认情况下引用系统 wp_head() 获得很多的 meta 标签,其中有一些不太必要,所以我们可以通过 add_filter 和 remove_action 删除这些标签。 打开主题下的 functions.php 文件,加入下面的

  • 这是 vue-meta 组件的一个特性, 具体请参考 HTML 头部设置指引。 为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid 键为meta标签配一个唯一的标识编号。请阅读关于 vue-meta 的更多信息。 拿下面的例子来说,对于描述 meta 标签, 我们给 hid 属性设定一个唯一的标识值为:description, 当有组件定义了相同 hid

  • 问题内容: 我需要在有角度的应用程序的特定页面上插入开放图元标记。 这些标签根据页面上的新闻或视频而有所不同。 我尝试将变量添加到$ rootscope。相关变量将使用meta标记填充。 现在这是我的问题。只要用HTML字符串填充此变量,它们就不会形成头部的一部分,而是输出到主体。我搜寻了一天,找不到任何可行的解决方案。任何帮助,将不胜感激 问题答案: 我创建了一个Angular模块,该模块可用于

  • 问题内容: 我应该在样式表中使用以下哪项? W3C指定什么是 正确的方法 ? 问题答案: W3C表示引号是可选的,您使用的所有三种方式都是合法的。 开头和结尾的引号只需是相同的字符。 如果您的URL中包含特殊字符,则应使用引号或转义字符(请参见下文)。 URI值的格式为’url(’,后跟可选的空格,后跟可选的单引号(’)或双引号(“)字符,然后是URI本身,然后是可选的单引号(’)或双引号(“)字

  • 如题怎么读取 [VERSION] 这个 content 属性,只能用原生方法么?

  • 我正在尝试用我的项目设置mapstruct,我已经习惯了通过简单的jvm代理来完成的lombok,所以我真的不明白如何让mapstruct工作。 这是我的pom: 请注意,在mapstruct进入游戏之前,我不需要整个maven编译插件块:一切都很好。我可以毫无问题地构建springboot胖jar,无需明确指定spring和lombok注释处理。。。那是非常美好的时光。 现在我甚至不确定我是否在