我已经创建了一些响应式网站,但对于响应式网站开发还比较新。在我的CSS中,99%的值都是使用em或百分比表示的。我正在使用媒体查询(包括max-width和max-device-width)来进行布局更改。我没有包含viewport meta标签,在iOS上以及我测试过的许多Android手机和平板电脑以及所有桌面浏览器上都可以完美地工作。
添加meta标签会破坏我的网站。我是做错了什么,还是做对了,所以不需要包含它?我很困惑为什么这似乎是最佳实践,因为它破坏了我的东西。
我有什么遗漏吗?
我已经创建了一些响应式网站,但对于响应式网站开发还比较新。在我的CSS中,99%的值都是使用em或百分比表示的。我正在使用媒体查询(包括max-width和max-device-width)来进行布局更改。我没有包含viewport meta标签,在iOS上以及我测试过的许多Android手机和平板电脑以及所有桌面浏览器上都可以完美地工作。
添加meta标签会破坏我的网站。我是做错了什么,还是做对了,所以不需要包含它?我很困惑为什么这似乎是最佳实践,因为它破坏了我的东西。
我有什么遗漏吗?
<meta name="viewport" content="width=device-width, initial-scale=1">
,使虚拟视口与设备尺寸相匹配。(请注意,initial-scale=1
似乎是必需的,以使虚拟视口适应 iOS 的横向模式。)这使得移动浏览器的行为与桌面浏览器一直保持一致,这也是我习惯的方式。没有视口(viewport)的情况下,您的设备将使用虚拟视口(virtual viewport),默认情况下,这是您网站的缩小版本,在iPhone上约为980像素,在安卓上约为800像素。一旦您设置了视口并禁用了此缩放功能,设备会按照应有的方式处理网站,在不同设备和方向等条件下,宽度大约为480像素或320像素。
以下是完整资源链接,我的建议是,每当您在处理响应式和移动端时,先设置视口。这是规范化设备缩放和确保您的网站以实际设备宽度显示而不是任何虚拟宽度的最佳方法。
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
所以回答我的问题。这是不必要的。
您可以使用min和max宽度媒体查询来在特定断点处为桌面版设置样式。
然后,您可以针对平板电脑和手机更新主要的字体大小和其他属性。就像我说的那样,这主要是为了增加可读性。
但是,这种方法存在一个重大的可维护性问题。
Viewport元标记允许您简单地使用从台式机到移动设备跨度的最大和最小宽度。
您应该绝对使用视口标签,因为它们可以使网页开发人员的生活变得无比简单。它们允许您轻松控制任何屏幕(甚至在桌面上)的精确渲染尺寸和/或缩放级别。这使得为任何设备构建网站变得易如反掌。但请知道,伴随着巨大的权力而来的是巨大的责任。明智地使用这种力量(并不要禁用缩放)。
并非所有设备都支持,但对于移动设备来说是可以的。 移动浏览器会在一个虚拟“窗口”中呈现网页,该窗口通常比屏幕宽,因此他们不需要把每个页面布局压缩到一个小窗口中(因此会导致一些未经过移动优化的网站出现问题,用户必须进行缩放)。移动Safari引入了“视口元标签”,以便让Web开发人员控制视口的大小和缩放。现在所有移动浏览器都支持该标签,即使它不是任何Web标准的一部分。 一个典型的移动优化网站应包含以下标签:
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0
">
通过定义最大比例,您可以控制用户缩放的方式。我认为我们应该启用此选项,因为即使是响应式网站,我也希望进行缩放,这已经成为了一种直觉,变得非常自然而然。
是的,这是开发响应式网站所必需的标签。然而,仅使用该标签并不能帮助您实现这一目标,但它们确实能够通过允许您控制网页上可见内容的大小来更轻松地开发响应式网站。
对于那些有疑问的人,最简单的方法是在不使用它的情况下进行测试。我这样做,并迅速得出结论 - 如果我只能保留一个元标记,那么这将是它(高于“描述”和其他任何内容)。实际上,如果我必须在这个和所有其他元标记之间做出选择,我会放弃所有其他元标记。只需测试它!
是的,这是必需的。
当人们开始在桌面浏览器上浏览网页(在1990年代),每个人都有低分辨率屏幕,如640×480或800×600。
但是,2007年,iPhone发布了。它的屏幕分辨率为320×480,比大多数桌面屏幕要低。因此,请考虑以下HTML代码:
<!DOCTYPE html>
<html>
<img src="/reallylargeimg.jpeg" style="width:640; height:480;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ex, sagittis id erat nec, imperdiet posuere erat. Mauris pharetra neque quis venenatis sagittis.</p>
</html>
<meta name="viewport" content="width=200px" />
这将屏幕宽度设置为200像素。更广泛使用的解决方案是:
<meta name="viewport" content="width=device-width" />
它将宽度设置为屏幕宽度。<meta name="viewport" content="width=device-width,initial-scale=1.0" />
@media only screen and (max-width: 600px) {
#hamburgermenu {
display:block;
}
#menubar {
display:none;
}
}
@media only screen and (min-width: 600px) {
#hamburgermenu {
display:none;
}
#menubar {
display:block;
}
}
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
console.log('closed!');
content.style.display = "none";
} else {
content.style.display = "block";
console.log('opened!');
}
});
}
@media only screen and (max-width: 600px) {
#hamburgermenu {
display: block;
}
#menubar {
display: none;
}
}
#hamburgermenu {
position: fixed;
top: 0;
width: 100%;
background-color: aqua;
border: 1px solid black;
}
@media only screen and (min-width: 600px) {
#hamburgermenu {
display: none;
}
#menubar {
display: block;
}
}
li {
list-style: none;
cursor:pointer;
}
li::before {
content: "→ ";
user-select: text;
-o-user-select: text;
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
}
::selection {
background-color: #b3d4fc;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--over here-->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>demo</title>
</head>
<body>
<div id="hamburgermenu">
<button class="collapsible">Open Menu</button>
<ul style="display:none;">
<li onclick="console.log('option 1!'); alert('1');">Option 1</li>
<li onclick="console.log('option 2!'); alert('2');">Option 2</li>
<li onclick="console.log('option 3!'); alert('3');">Option 3</li>
</ul>
</div>
<div id="menubar">
<button onclick="console.log('option 1!'); alert('1');">Option 1</button>
<button onclick="console.log('option 2!'); alert('2');">Option 2</button>
<button onclick="console.log('option 3!'); alert('3');">Option 3</button>
</div>
<br>
<p>Resize the window to see the media query effect.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ex, sagittis id erat nec, imperdiet posuere erat. Mauris pharetra neque quis venenatis sagittis.</p>
</body>
</html>