移动端网页代码适配

2021-02-19 906 阅读1分钟

相比于竖屏，在 iPhone 横屏上显示的网页字体会更大，显得很难看，那如何解决呢？答案是在该网页上的元素添加样式：

text-size-adjust: none;

禁止页面缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

禁止长按选中：

document.documentElement.style.webkitTouchCallout = 'none';
document.documentElement.style.webkitUserSelect = 'none';

示例代码

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    
    <style type="text/css">
        * {
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            text-size-adjust: none;
        }
    </style>
    
    <script type="text/javascript">
        document.documentElement.style.webkitTouchCallout = 'none';
        document.documentElement.style.webkitUserSelect = 'none';
    </script>

</head>
<body>
    <div style="font-family: menlo; font-size: 14px;" />
    
</body>
</html>

参考：link, link