使用視口width = device-width，initial-scale = 1，maximum-scale = 1不能使我的頁面適合我的手機屏幕

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

幾件事情：

您的meta視口標簽僅是設置視口的縮放比例。 它與您的圖像無關。

從技術意義上說，您的圖像不是背景圖像。 背景圖像是元素的css屬性。

您的img固定寬度為970像素。 這就是為什么它比您的視口更寬的原因。

一個快速的解決方法是：

更改：

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

至：

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

這會將您的img寬度設置為其包含元素的100％。 因此，只要其中包含的元素是流動的，您就可以進行。

除非您希望該圖像為970像素並且能夠滾動它以在小屏幕上查看隱藏的部分，否則您需要開始使用overflow CSS屬性進行播放。

Answer 2

那是因為meta標簽不能使其適應，而只是告訴瀏覽器以1（或原始大小的100％）的比例顯示頁面，而不是試圖縮小以適合頁面。 為了使頁面適合您，您需要確保內容小於設備的寬度，或者確保樣式允許它響應設備的寬度。 我建議在響應式設計上查找一些資源，因為這是一個很大的領域，可以在這里進行介紹。