html - 未声明元标记时移动设备上的默认虚拟端口大小?

标签 html css mobile responsive-design

响应式设计是否必须使用元标记视口(viewport)?

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

我在没有的情况下做了一些测试,它在桌面浏览器上运行良好,并且它能适本地适应窗口的大小,即使我使用视口(viewport)作为宽度或高度来定义页眉和页脚也是如此。

那么元标记是只对移动设备有用还是有必要? 视口(viewport)是否使用移动设备的默认宽度或高度?

最佳答案

如果未定义元标记,则会定义一个虚拟视口(viewport)默认值。具有这些默认值的非移动优化网站通常在窄屏设备上看起来更好。

在 Safari iOS 上,默认宽度为 980 像素,其他浏览器的宽度大小相似或略小。

窄屏设备(例如手机)在通常比屏幕宽的虚拟窗口或视口(viewport)中呈现页面,然后缩小呈现的结果以便一次可以看到所有内容。然后用户可以平移和缩放以查看页面的不同区域。

For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

Explanation and default values for width and height with viewport on mobiles

Apple 作为视口(viewport)的发明者说,默认的视口(viewport)设置是: 默认宽度为 980 像素。但是,这些默认设置可能不适用于您的网页,尤其是当您为特定设备定制网站时。

Apple configuring viewport and default values

关于html - 未声明元标记时移动设备上的默认虚拟端口大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55721175/

相关文章:

html - 物理像素 vs CSS 像素 vs 设备独立像素 vs 密度独立像素 vs PPI

javascript - jQuery Mobile - 如果选择输入,则固定标题更改大小

css - 如何将带有轻微数字变化的通用类名表示为一个 - CSS 速记?

jquery - 移动选择列表 - 隐藏默认选项

android - 我可以依靠自动移动调整来进行响应式设计吗

javascript - 如何发送不同的 ID 作为 JS 函数的参数?

jquery - 砌体图像相互重叠

ios - UINavigationController ios7 - NavTab 在 View 前面

html - 在开发过程中使 <map> 标签中的 <area> 可见

css - WebStorm 中的 PostCSS 语法