Question

我有这个但是当我在手机上打开网页时，它比屏幕宽。

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

所以我必须捏一下才能让它健康。这可能是因为有一些图像用作html页面的背景？例如，下面我有以下内容：

<img src="index_files/img2.png" width="970">

我对HTML知之甚少，所以我无法理解复杂的答案。

我还看到了一些具有绝对尺寸的div元素：

<div class="container">
    <div class="row">
        <div class="sm-12">
            <div class="blue-bg">
                <h3 style="color: #F37620; font-weight: bold; font-size: 22px; background: #34495D; width: 400px; text-align: center; padding: 10px;margin-bottom: 0;  margin-left: 56.6%; text-transform: uppercase;" "=""> requirements specification </h3>

                <img src="index_files/img2.png" width="970">

                <div class="row">
                    <div class="sm-6">
                        <h6 style="font-weight: bold;

正如您所看到的，它有一个width: 400px，而且这个html文件中有很多这样的事情

Answer 1

结合一切：

您的元视口标记只是设置视口设置的比例。它与您的图像无关。

您的图像不是技术意义上的背景图像。背景图像是元素的css属性。

你的img为970px有一个固定的宽度。这就是为什么它比你的视口宽。

快速解决方法是：

更改：

<img src="index_files/img2.png" width="970">

以

<img src="index_files/img2.png" style="width: 100%"/>

这会将你的img宽度设置为包含元素的100％。因此，只要含有元素的元素是流动的，你就可以去了。

除非您希望该图像为970px并且能够滚动它以在小屏幕上查看隐藏部分，否则您需要开始使用overflow css属性。

Answer 2

这是因为元标记不适合，但只是告诉浏览器以1的比例（或其原始大小的100％）显示页面，而不是试图将其缩小到适合。要使页面适合，您需要确保内容小于设备的宽度，或者样式允许它响应设备的宽度。我建议在响应式设计上查找一些资源，因为这是一个非常大的区域，可以尝试覆盖这里。

使用viewport width = device-width，initial-scale = 1，maximum-scale = 1不适合我的页面到我的手机屏幕

2 个答案: