响应式元标签 | CSS-Tricks

我倾向于使用这个

<meta name="viewport" content="width=device-width">

虽然我看到很多人推荐这个

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

这意味着浏览器将（可能）以其自身屏幕的宽度渲染页面的宽度。因此，如果该屏幕的宽度为 320px，则浏览器窗口的宽度将为 320px，而不是过度缩小并显示 960px（或该设备在没有响应式元标签的情况下默认执行的操作）。

注意： 不要在你的网站不是专门为响应式设计而设计，并且在该尺寸下表现良好的情况下使用响应式元标签，因为这会使体验变得更糟。

此标签支持更多属性

属性	描述
width	设备的虚拟视窗宽度。
device-width	设备屏幕的物理宽度。
height	设备的“虚拟视窗”高度。
device-height	设备屏幕的物理高度。
initial-scale	访问页面时的初始缩放比例。1.0 表示不缩放。
minimum-scale	访问者可以在页面上缩放的最小比例。1.0 表示不缩放。
maximum-scale	访问者可以在页面上缩放的最大比例。1.0 表示不缩放。
user-scalable	允许设备进行放大和缩小。取值可以是 yes 或 no。

通常建议不要阻止缩放，因为这很烦人，而且可能会导致可访问性问题。

你可能需要在你的 CSS 中添加这个

@-ms-viewport{
  width: device-width;
}

需要注意的是：使用 JavaScript 更改此元标签的值是可行的，页面会对新值做出反应。可以删除整个标签并替换，也可以更改 content 属性。这并不常见，但可能会出现这种情况。

Alison

# 2014 年 7 月 21 日

在我的 iPad 上效果很好，但在我的 iPhone 上不行

Pali Madra

评论永久链接# 2014 年 9 月 24 日

看起来它并不适合所有人。我试了一下，它在手机上效果很好，但在三星平板电脑上出现了问题。
Felix

评论永久链接# 2017 年 1 月 11 日

有没有人注意到，user-scalable=no 在移动版 Safari 中被忽略了（可能是在 iOS 10 更新之后）？或者只是我的设备（iPhone 5）有问题？

spellright

# 2014 年 7 月 30 日

应该是“iPad”和“iPhone”。

correctgrammar

评论永久链接# 2014 年 7 月 31 日

句子以大写字母开头。

Lakeside Techies

# 2014 年 7 月 30 日

即使是谷歌也已经将响应式网站作为默认设置，并且会对这些网站进行更高的排名和更好的评价。因此，必须采取一切措施以确保你的网站在所有设备上都能更好地显示。

Monica

# 2014 年 8 月 4 日

meta name viewport 不起作用

我在我的网站上尝试了所有这些元标签，但没有一个起作用
meta name=”viewport” width=”device-width”
meta name=”viewport” content=”width=device-width, initial-scale=1.0″
meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″
meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”
…
但是当我将 @-ms-viewport{ width: device-width; } 添加到 style.css 中时，它起作用了，但宽度在我的 iPhone 和三星平板电脑上不是 100%，用户仍然需要水平滚动。
我的主要内容宽度是 1070px。

blaqstar

评论永久链接# 2015 年 2 月 27 日

你必须在样式表中为不同的屏幕尺寸添加一些代码。这样，如果用户在平板电脑或手机上，页面就会自动调整，也就是“视窗”。
我通常这样做。

@media screen and (max-width: 768px){
然后在这里添加样式}

其中“768px”是屏幕尺寸。对于移动屏幕尺寸，我会做同样的事情，大约是 320px。

@media screen and (max-width: 320px){
}
Aditya

评论永久链接# 2015 年 6 月 22 日

你必须为每个屏幕编写媒体查询。

ayaan

# 2017 年 11 月 20 日

你好，添加这个可以去除空白

html, body {
    overflow-x: hidden
}

body {
    overflow: hidden !important;
    width: 100%;
    height: 100%;
}

robert

# 2014 年 10 月 7 日

@Monica

这是因为，根据设备的不同，scale=1 实际上不是 scale=1，而是 scale=1.5…

所以，这就是 HTML5 的强大之处。
我也是，我想知道需要多少天才才能得到如此愚蠢的结果。
你指定 scale 为 1，却得到 1.5

这与设备的 dpi/分辨率有关，基本上 1 个像素并不等于 1 个像素。

祝你好运。

Sanjeev

# 2014 年 10 月 8 日

**嗨，我有点困惑，我需要你的帮助。**
我需要将 viewport 元标签插入到只有首页或所有页面。
请回复，我迫切期待你的回复？
**

Pramod Kushwah

评论永久链接# 2016 年 1 月 17 日

嗨，我是 Pramod Kushwah，动态网站只有首页，静态网站所有页面。
Soumodeep

评论永久链接# 2017 年 6 月 5 日

是的，你必须将它们插入到所有页面。

Laura

# 2014 年 10 月 13 日

我的网站没有缩放到 iPad mini，有没有办法更改缩放比例，以便 mini 可以看到我的网站的移动版？

在页眉中包含以下内容
<meta name=”viewport” content=”width=device-width,initial-scale=1″>

在 CSS 中添加以下内容
#featured-content .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } #featured-content .loading .flex-viewport { max-height: 300px; }

感谢你的帮助！！

sgnl

评论永久链接# 2017 年 10 月 27 日

iPad 被识别为“桌面”客户端。因此，你必须像在 @media 块中一样声明针对它的样式。

Maks

# 2014 年 10 月 22 日

在 iOS7 及更低版本中，视窗单位存在一个错误。要修复它，只需使用这个 js
https://github.com/rodneyrehm/viewport-units-buggyfill

这是一个非常棒的网站，适合提问者。

# 2014 年 10 月 28 日

我希望我的网页在所有移动设备上都能放大和缩小，而在浏览器中打开时，可以缩小并显示滚动条，我应该怎么做？

DAAN

# 2014 年 11 月 18 日

我有一个问题。

我正在创建一个简单的 jQuery 健身网站，我正在尝试创建一个包含人体图片的起始屏幕。我在图片上放置了一些带有链接的形状，这样当你点击手臂时，就可以跳转到一个页面，在那里你可以找到训练手臂的方法，等等。

但问题是，当设备改变时，图片也必须随之改变，这没问题。但坐标也必须改变。不幸的是，它对我不起作用。
我尝试使用一个包含变量 device-width 的公式

coords=”device-width/19520,device-width/195118,device-width/19595,device-width/195246″

195 是设备的原始宽度，20、118、95 和 246 是原始图片上的坐标。但这对我不起作用。有没有办法做到这一点？

Abhijit

# 2014 年 12 月 9 日

你好，
不错的文章。
以下是一些关于视窗的链接，可以帮助你了解更多。
https://mdn.org.cn/en/docs/Mozilla/Mobile/Viewport_meta_tag
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Abhijit

# 2014 年 12 月 9 日

http://www.quirksmode.org/mobile/metaviewport/

Gabriel

# 2014 年 12 月 17 日

尝试将宽度设置为“100%”，然后布局将在任何屏幕上自动调整。

Saitove

# 2015 年 1 月 20 日

我在 iPad 上遇到了问题，我解决的办法是在内容中添加 content=”width=数字… 有时，为网站适应屏幕添加不同的宽度数字而不是“device-width”可能是一个更好的选择。如果你想查看我的第一个网站，可以看看：http://saitove.bg

Juan

# 2015 年 1 月 28 日

简单的问题！name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=0″
和
name=”viewport” content=”width=device-width, initial-scale=1.0″
有什么区别？

谢谢

satriyoz

# 2015 年 2 月 3 日

谢谢，这真的很有帮助..
我想知道如何让我的网站在用户通过智能手机打开时自动放大。

维戈·丹尼尔森

# 2015 年 2 月 12 日

也许这两个是解决方案（将两者都放在 CSS 文件的顶部）

@viewport{ zoom: 1.0; width: extend-to-zoom; }
@-ms-viewport{ width: extend-to-zoom; zoom: 1.0; }

埃拉德·卡拉科

# 2015 年 3 月 7 日

1] 你应该指定 @viewport 或者使用 meta 标签 <meta name="viewport" ...,

你不应该同时使用两者，meta 标签会被渲染引擎转换为 @viewport 规则，覆盖你在里面写的任何内容…

>> viewport on dev.w3.org-whitepapers

2] viewport meta-tag 可以完全省略，并用在页面标题中发送数据来代替，
这可以帮助你节省大量的宝贵页面空间，使你的页面更小（更易读..）
实际上，你可以对页面中的所有 meta 标签（包括苹果标签和 og:* 标签）这样做。

这里有一个工作示例（PHP）

<?php 
header('Charset: UTF-8', true);
header('Content-Encoding: UTF-8', true);
header('Content-Type: text/html; charset=UTF-8', true);

header('apple-mobile-web-app-capable: yes', true); //mobile friendly hacks
header('apple-mobile-web-app-status-bar-style: translucent black', true); //run in full-screen mode
header('viewport: width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, user-scalable=0', true);
?><!DOCTYPE html><html>.......
.......

艾尔·加德彭

评论永久链接# 2015 年 5 月 12 日

赞赏！
需要注意的是，‘user-scalable’ 的可能值为 ‘yes’ 或 ‘no’
迈克尔

评论永久链接# 2015 年 11 月 18 日

有人可以帮忙吗
我的网站是用旧版的 Frontpage 2002 创建的
尝试使其适应移动设备
http://www.besthometheaterpro.com

提前致谢
简

评论永久链接# 2016 年 6 月 26 日

有人可能会说，将这些数据放在标题中不会节省太多，因为标题毕竟必须通过网络发送。将它们放在 html 中似乎比用 php 或你使用的任何服务器语言编写标题更容易维护。

格哈德

# 2015 年 3 月 13 日

是否有 “device-width” 的替代方案？我问这个问题的原因是我希望这个 bootstrap 网站响应容器大小而不是窗口。页面分成两部分，当我调整分隔线大小的时候，我希望 “列” 能够响应，但目前它只会在调整实际浏览器窗口大小时才响应。:/

永恒

# 2015 年 3 月 21 日

伙计们，我刚接触网站编码，我在编码的开始阶段遇到了一些问题，如果你们能帮我解决，我将不胜感激:)

body{
margin:0;
padding:0;
}

#header{
max-width:100%;
height:135px;
background-color:#ebebeb;
}

#headWrapper{
max-width:1200px;
height:85px;
margin:auto;
float:left;
}

.logo{
background-image:url(“img/logo.png”);
float:left;
width:350px;
height:78px;
margin-top:20px;
}

#naviWrapper{
float:left;
max-width:530px;
height:40px;
margin-left:275px;
font-family: ‘Open Sans’, sans-serif;
margin-top:50px;
}

.homeBTN,
.aboutBTN,
.productBTN,
.solutionBTN,
.contactBTN{
float:left;
margin:5 20;
}

首页
关于我们
产品
解决方案
联系我们

这是我的代码，我的问题卡在 “header div” 和 “headWrapper div” 部分，当我想要在 “headWrapper div” 上添加 margin-top 时，“header” 和 “headWrapper” 两个 div 都会一起向下移动，我希望只有内部部分的 div 有 margin-top。

亚历克斯

# 2015 年 4 月 17 日

响应式 meta 标签中没有 device-width 和 device-height 属性 - 它们是值。查看规范。

亚历杭德罗

评论永久链接# 2015 年 5 月 12 日

嗨。是元素的宽度设置为 px。我将其设置为 %，它工作正常。我还是不明白。我甚至尝试删除整个 css，错误仍然存在，也许是 chrome 用户代理。

亚历杭德罗

# 2015 年 5 月 8 日

你好。我遇到一个非常奇怪的错误。我正在使用它
在两个网站上。

我甚至验证了 html，它在两个网站上都正常。在第一个网站上，它工作正常，但在第二个网站上却发生了这种情况
https://dl.dropboxusercontent.com/u/3570799/Screen%20Shot%202015-05-08%20at%201.56.49%20AM.png
它似乎将整个网站缩放到 50% 的宽度并将其对齐到左侧。

我删除了 css，它仍然发生，所以我认为是 html 有问题，但根据 w3 验证器，它没有一个错误。

如果我删除 meta 标签，字体看起来太小。我会删除它并尝试使用媒体查询来使其工作，但我还不理解。

阿尤巴

评论永久链接# 2022 年 9 月 15 日

我可以不使用 meta viewport 就可以使用媒体查询吗？

UNique

# 2015 年 7 月 27 日

document.ready() {
alert(‘thanks!’);
}

约瑟夫·布阿皮姆

# 2015 年 8 月 19 日

这是我的代码，但它不起作用，有人可以帮忙吗？#sample{
font-size:16px;
font-family:Georgia, “Times New Roman”, Times, serif;
font-weight:400;
color:blue;
}

@media screen only and(max-width:640px){
#sample{
color:#F00;

}

阿尤什·阿加瓦尔

# 2015 年 10 月 8 日

如何将初始缩放比例设置为设备支持的最小缩放比例？例如，我的 iphone 的最小缩放比例是 0.3，但 ipad 的最小缩放比例是 0.8......所以我希望网页自动采用设备的初始缩放比例。有没有什么标签可以做到这一点？请回复。

罗贝尔

# 2015 年 11 月 4 日

嗨，我们可以添加 user-scalable=no, minimum-scale=1.0 和 maximum-scale=1.0 吗？

门娜·拉马丹

# 2015 年 11 月 30 日

嗨，我想在 index.html 中使用 meta 标签来禁用缩放，这样它将应用于所有 html 页面，但在特定页面中，我想覆盖它以启用缩放
有人可以帮我吗？
谢谢

codememobile

评论永久链接# 2015 年 12 月 5 日

嗨，门娜，我不明白你的意思。一开始你说你想禁用所有页面的缩放，但后来你说只是特定页面。你需要对哪个页面进行操作？

PBScott

# 2016 年 3 月 7 日

我的网站运行完美，直到我添加 viewport，然后它在手机和平板电脑上无法正常工作。当然，解决方案是不使用 viewport，但那样 Google 不会发送访问者......我讨厌这种垃圾，我的网站很好，google 机器人很笨，它需要修改代码。

Al3abMizo Games

# 2016 年 3 月 16 日

感谢提供重要信息，实际上我已经将代码添加到非响应式设计中，它运行良好。

基兰

# 2016 年 11 月 29 日

我的容器大小为 800px，需要保持静态。我需要容器在移动设备上根据纵向模式下的宽度进行调整，并在横向模式下根据高度进行调整。

我使用了 “”，它根据纵向模式下的宽度进行工作。但在横向模式下需要固定高度。请提供建议。

此外，上面的语法在 iPhone 上不起作用。所以针对 iPhone 有什么解决方案吗？

基兰

评论永久链接# 2016 年 11 月 29 日

这里使用的语法是 meta 标签 name=”viewport” content=”width=device-width”

阿尔博

# 2017 年 6 月 11 日

我为 device-width 和 user-scalable 指定 “yep” 取得了很好的效果。添加 “1” 作为 initial-scale 似乎没有多大效果。

阿尔博

# 2017 年 6 月 11 日

为了进一步解释，我的 body 的最大宽度为 31em，初始字体大小为 19px。一个或两个媒体查询来调整字体大小（例如，iPad 上稍微大一点）。我已经阅读过，并且坚定地同意 Matthew Butterick 的《实用排版》。（设置在 24px，对我来说有点大。）为了可读性，他建议不要害怕 “空白”。因此，我的网站的笔记本电脑版本有很多空白，但具有舒适易读的行长。这在其他设备上也是如此。我认为，一个值得的目标是：可读性。

亚当

# 2017 年 7 月 17 日

“user-scalable=no” 阻止了我的固定位置顶部导航在 Android 上的 Chrome 浏览器中滚动时上下移动。感谢引用！

查尔斯·罗伯逊

# 2018 年 4 月 20 日

我可以将其用于非移动浏览器吗？我想将整个网站放大 1.2 倍。当我尝试使用 CSS ‘transform:scale(1.2)’ 时，一切看起来都很好，但模态窗口和 ‘页面加载后’ 添加的 DOM 元素的位置出现了问题。因此，我无法使用 ‘transform’。CSS ‘zoom’ 属性在 Firefox 中不起作用。我想知道是否可以使用 meta name=viewport，其 initial-scale 为 1.2，来解决这个问题。谢谢。

维克多·普尔

# 2018 年 11 月 17 日

W3C CSS 验证器结果（CSS 第 3 级 + SVG）
抱歉！我们发现了以下错误 (1)
wp-content/themes/twentysixteen/style.css?ver=03779222086b3b8a23b60f8f148f2124
2750 值错误：宽度 device-width 不是宽度值：device-width

Randy Constan

# 2018 年 12 月 27 日

我对这里展示的方法的问题是，没有一种方法真正解决了同时将视窗宽度设置为“设备宽度”以及使横向和纵向文本显示在相同大小的问题。我一直在用的一种方法是，首先为所有桌面浏览器指定 1rem 的整体正文字体大小。然后，在媒体选择器中，为纵向和横向情况指定不同的字体大小。例如，如果我将纵向正文元素的字体大小确定为 0.9rem，然后将横向的字体大小确定为 0.7rem，当手机屏幕旋转时，我最终会得到非常接近的字体等效性。也许有一种方法可以在没有这种补偿的情况下获得相同的效果，但这是我唯一能够依靠的方法。

okhype

# 2019 年 1 月 16 日

这里用户可缩放为 0 而不是 No，会有什么矛盾吗？例如 (user-scalable=0;)

Yuri Antares

# 2019 年 1 月 23 日

视窗元数据中还有一个有用的功能。
如果未指定，浏览器将使用默认值，截至今天为 160dpi。但如今实际的设备通常每英寸的点数要多得多。这就是为什么 Android 团队实现了一个自定义视窗元数据属性，以允许您为高分辨率 (HDPI) 屏幕自定义浏览器缩放比例。

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

这将使用目标设备的 DPI 而不是默认的 160dpi 值。

CSCOm

# 2019 年 3 月 2 日

width=device-width; height=device-height;

# 2019 年 8 月 31 日

非常感谢，效果很好

评论

发表评论 取消回复

发表评论取消回复