JavaScript和CSS在PC上获得与电话和平板电脑不同的窗口宽度

Question

首先包含此代码

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

我正在使用此简单的JavaScript代码来获取窗口宽度，以附加某些文件，如果宽度小于79px

$(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上（用窗口重新尺寸为手机）警报显示303px，然后在电话和平板电脑上警报980px，并且不警报"欢迎"。背景更改为PC上的粉红色，但在Android手机或平板电脑上根本不会更改该差异来自哪里以及如何修复它？

Answer 1

通常是确保媒体查询和JS同时启动的一种更简单的方法，是不支持您在屏幕尺寸上的if语句，而是不支持CSS条件尺寸较小。这确保了一致性。

您的警报也不会在980点发射，因为这不少于979。对于不将背景更改为粉红色，您确定自己以低于480px的速度查看吗？您说的是PC上的粉红色，但根据该媒体声明，它不应以480px的任何内容。