無法阻止在 iPhone 上使用初始比例=1 進行縮放

Question

我正在將以前固定寬度的設計轉換為響應式設計。

我修改了布局以使用 %s 並添加了媒體查詢。
我添加了視口元標記： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
當我縮小瀏覽器窗口時，一切都很好。
當我使用 Google Chrome 的模擬器時，一切仍然很好

但是當我使用實際的 iPhone 進行測試時，有額外的寬度會導致水平滾動。

我究竟做錯了什么？

這里有兩個現場演示：

Answer 1

通常，您必須使用媒體查詢來補充您的響應式設計，並且您可以使用 css 限制瀏覽器行為，僅用於您的手機渲染

@media (max-width: 640px){
     /*your css code here*/
}

嘗試一下...

這是媒體查詢的一個很好的參考

祝你好運，