html元视口标记

我建立了一个html登录页，你可以看到它 我以这种方式使用元视口标记：

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

当我从手机进入此页面时，页面宽度不适合屏幕， Iphone示例- 我做错了什么？

---

根据WAR10CK的建议，考虑将视口元标签更改为如下内容：

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

---

我不确定你的最终设计目标是什么，但这应该会让你朝着正确的方向前进。你也可以研究一些类似于引导的东西来帮助你使网站更具响应性。

首先，遵循来自的好建议，并将你的视口标记更改为类似的内容

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

您需要删除930px的宽度，或者使用媒体查询覆盖它，因为在狭窄的视口中，它可以防止页面布局崩溃

---

希望这有帮助

。可能需要设置附加的

视口

内容设置，如

最大比例

、

最小比例

、

初始比例

和

用户可缩放比例

。问题应包含足够的代码来重现问题，并明确说明问题所在。链接到一个实时页面（这里通过在线服务）是不够的；一旦页面被修复或修改，它就会变得无用。而

meta

标签并不能神奇地使任何东西都适合。它或多或少地告诉浏览器，你已经设计了适合页面的东西，而不需要重新缩放。我认为这并不能回答OP的问题。他/她正在尝试将其格式化为移动设备…@jmadden谢谢，我尝试了这两个选项，仍然不起作用，有什么建议吗？我也有同样的问题。我应该将其更改为另一个固定宽度，还是必须使用宽度为~1200px等的百分比？@Csteele5-是的，在元素上设置固定宽度通常会给移动设计带来麻烦，解决方案部分取决于您的设计细节。您可以使用您提到的百分比，或者在视口足够宽以显示它时设置固定宽度，然后使用媒体查询在较窄的视口中设置元素的不同属性。查看是否需要帮助以开始媒体查询。祝你好运

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

.content {
    width: 930px;
    margin: 35px auto;
}