强制移动设备的最小网站宽度

Question

客户的网站使用响应式主题，他们想禁用移动版本，以便移动访问者看到平板电脑版本但缩小了。

我曾尝试简单地更改适用于移动访问者的断点，但主题开发人员自己承认，由于 sheet 样式的设置方式，这非常复杂且耗时。

因此，我开始寻找一种更直接的方法来执行此操作，即强制移动访问者的最小 window 大小。可能具有检测浏览器宽度是否低于 700px 的功能，如果是，则将 window 大小调整为 1000px？或者有更好的方法吗？

感谢您的帮助。

Answer 1

window.onload = function() {
  var b = document.body
    , w = window.innerWidth;
  if( w < 700 ) {
    b.style.maxWidth = '1000px';
    b.style.minWidth = '1000px';
    b.style.overflowX = 'scroll';
  } return;
}

由于您的问题是从 WPSE 迁移过来的，我建议您在子主题的函数文件中添加带有自定义插件的脚本或此代码：

add_action("wp_footer", function() { 
  ?>
    <script type="text/javascript">
    window.onload = window.onresize = function() {
      var b = document.body
        , w = window.innerWidth;
      if( w < 700 ) {
        b.style.maxWidth = '1000px';
        b.style.minWidth = '1000px';
        b.style.overflowX = 'scroll';
      } else {
        b.style.maxWidth = null;
        b.style.minWidth = null;
        b.style.overflowX = null;
      } return;
    }
    </script>
  <?php
});

基本上 700px 宽度以下的屏幕将有一个水平滚动条来滚动浏览内容。

我正确添加了 onresize 事件，希望对您有所帮助。

强制移动设备的最小网站宽度

Force minimum site width for mobile devices

responsive