在css的视口元标记

时间:2016-09-05 10:50:03

标签: html css responsive-design viewport device-width

在CSS中用于实现响应式网页设计的viewport元标记中,我们设置宽度=设备宽度,如<meta name="viewport" content="width=device-width">,以便页面的宽度等于设备宽度的宽度,这样用户就不必滚动查看页面但高度怎么样?浏览器是否根据宽度推断高度并使其成为device-height ???

2 个答案:

答案 0 :(得分:3)

响应式网站的正确meta标记如下:

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

width=device-width部分将页面宽度设置为遵循设备的屏幕宽度。 initial-scale=1部分设置浏览器首次加载页面时的初始缩放级别。您不需要设置特定高度,因为window维度始终都会根据更改进行缩放。但万一,您可以使用以下内容更改meta标记的内容。

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

如果您有更多疑问,请查看here

答案 1 :(得分:3)

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

width属性控制视口的大小。它可以设置为特定数量的像素,例如width = 600,或者设置为特殊值device-width,它是CSS像素中屏幕的宽度,比例为100%。 (有相应的高度和设备高度值,这对于具有根据视口高度更改大小或位置的元素的页面可能很有用。)

阅读此https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag然后希望清除所有内容。