javascript 和 css 在 PC 上获取与手机和平板电脑不同的窗口宽度

Question

首先头部包含这段代码

 <meta name="viewport" content="width=device-width, initial-scale=1">

如果宽度小于 79 像素，我正在使用这个简单的 javascript 代码来获取窗口宽度以附加一些文件

$(document).ready(function(){
   document.body.style.overflow = "hidden";
   var viewportWidth = $(window).innerWidth();
   document.body.style.overflow = "";
   alert(viewportWidth);
     if(viewportWidth<979){
        alert('welcome');
     }
  });

并在手机的主 css 文件中使用这个简单的 css 代码

 @media (max-width: 480px) {
   body{background: pink;}
}

问题出在 PC 上（窗口大小重新调整为手机），警报显示 303 像素，然后页面警报“欢迎”，但在手机和平​​板电脑上警报 980 像素，并且不警报“欢迎”。背景在 PC 上变为粉红色，但在 Android 手机或平板电脑上完全没有变化 这种差异来自哪里以及如何解决？

Answer 1

确保媒体查询和 JS 同时触发的一种更简单的方法通常是不支持屏幕大小的 if 语句，而是关闭仅在较小尺寸时才适用的 CSS 条件。这确保了一致性。

您的警报也不会在 980 处触发，因为它不小于 979。至于不将背景更改为粉红色，您确定您正在查看小于 480 像素吗？你说它在 PC 上变成粉红色，但根据媒体声明，它不应该超过 480 像素。