javascript 和 css 在 PC 上获得 window 宽度不同于 phone 和平板电脑

Question

首先头部包含这段代码

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

我正在使用这个简单的 javascript 代码来获取 window 宽度，以便在宽度小于 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 代码 Phones

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

问题出在 PC 上（window 重新调整为 Phone）警报显示 303px 然后页面警报 'welcome' 但在 [=31= 上警报 980px ] 和平板电脑，不提醒 'welcome'。背景在 PC 上变为粉红色，但在 Android Phone 或平板电脑上根本没有变化这种差异从何而来以及如何解决？

Answer 1

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

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

javascript 和 css 在 PC 上获得 window 宽度不同于 phone 和平板电脑

javascript and css get window width on PC different from phone and tablet

javascript

css

android

responsive-design