如何在iPhone Safari中居中网页表格并禁止页面横向滚动？

以下是针对你遇到的两个问题的修复代码及说明：

完整修复代码 #

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            width: 100%;
        }
        table {
            margin: 0 auto;
            max-width: 100%;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <a href="javascript:gotoPage(10);"><img src="temp" id="c1" width="300" height="330"></a> 
                <br>
                <a href="javascript:gotoPage(11);"><img src="temp" id="c2" width="300" height="330"></a> 
                <br>
                <a href="javascript:gotoPage(12);"><img src="temp" id="c3" width="300" height="330"></a> 
                <br>
                <a href="javascript:gotoPage(13);"><img src="temp" id="c4" width="300" height="330"></a> 
                <br>
                <a href="javascript:gotoPage(14);"><img src="temp" id="c5" width="300" height="330"></a> 
                <br>
                <a href="javascript:gotoPage(15);"><img src="temp" id="c6" width="300" height="330"></a> 
                <br>
                <a href="javascript:gotoPage(16);"><img src="temp" id="c7" width="300" height="330"></a> 
            </td>
        </tr>
    </table>
    <script>
        var $scope;
        function gotoPage(page) {
            $scope.send({payload: page});
        };

        (function(scope) {
            $scope = scope;
        })(scope);
    </script>
</body>
</html>

问题修复说明 #

1. 表格在Safari居中处理 #

• 给<table>设置margin: 0 auto，利用块级元素的自动外边距实现水平居中。
• 添加max-width: 100%确保表格宽度不会超出设备视口，避免因内容过宽破坏居中效果。
• 重置<html>和<body>的默认margin和padding，消除浏览器默认样式对布局的干扰。

2. 禁止页面横向滚动 #

• 添加viewport元标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，强制页面宽度匹配设备视口，同时禁止用户缩放。
• 给<html>和<body>设置overflow-x: hidden，直接隐藏横向溢出的内容，阻止横向滚动条出现。
• 给图片添加max-width: 100%; height: auto;，让图片自适应视口宽度，避免固定宽度的图片超出屏幕导致横向滚动。

内容的提问来源于stack exchange，提问作者asdaiui