100% 宽度在移动 webkit 上不一致 - 仅限 Apple 设备答案

【问题标题】：100% width not consistent on mobile webkit - Apple devices only100% 宽度在移动 webkit 上不一致 - 仅限 Apple 设备
【发布时间】：2021-08-26 12:55:19
【问题描述】：

我正在为客户制作网页，并正在为他们创建移动响应版本。

我已经浏览了大部分网站，但是，在加载我的“服务”页面时，页面右侧的空白处令人眼花缭乱。奇怪，因为它使用与所有其他页面相同的 CSS，所有页面都以 100% 的宽度显示。

测试设备： iPhone 4 - 铬、Safari iPhone 5 - Chrome、Safari

我也用三星 S3 对此进行了测试，但在 Chrome 中它似乎可以正常加载。

此外，我已经使用 Safari 开发者工具对其进行了测试并检查了页面。似乎从一开始的 HTML 就不符合 100%。我不知道如何解决这个问题！

页面是http://temp3.advisible.com.au/services

提前致谢！

【问题讨论】：

如果在视口元数据中添加 initial-scale=1 会怎样？
我已经尝试过了，不幸的是，它什么也没做

标签： iphone html css mobile mobile-webkit

【解决方案1】：

我已经设法为将来遇到此问题的任何人解决此问题。

我使用了 Wordpress 页面选择器并更改了页面的 html 宽度。

一个混乱的解决方案，但它有效。

<?php 
if (is_page('services')) {
    echo "<style> 
                @media only screen 
                and (min-width : 320px) 
                and (max-width : 480px) 
                {html {width: 340px; }}
        </style>";
  }
?>

【讨论】：