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

Posted 2023-03-06

【中文标题】javascript 和 css 在 PC 上获取与手机和平板电脑不同的窗口宽度

【英文标题】：javascript and css get window width on PC different from phone and tablet

【发布时间】：2015-07-23 07:52:22

【问题描述】：

首先头部包含这段代码

 <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) 
   bodybackground: pink;

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

【问题讨论】：

某些手机和平板电脑具有高分辨率，因此针对较小屏幕尺寸进行媒体查询以定位它们将不起作用。看看这篇文章以更好地检测手机和平板电脑***.com/questions/3514784/…

[link]***.com/a/13550716/4019425[/link] 有一些关于不同视图尺寸的信息，你的安卓设备是 480px 吗？可能会尝试设置一个范围，如答案中提供的那样，还可以使用最大设备宽度和设备宽度。祝你好运

@Pete 如果有新设备问世，您可能需要在一段时间后更新该解决方案。两年前我为某人制作的网站遇到了这个问题。

@Ignotus，是的，我们支付了一项服务，该服务实际上保留了最新的设备列表及其视口大小，但我真的不想把人们推向付费服务，因为它可能是被列为垃圾邮件

【参考方案1】：

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

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

【讨论】：

是的，我确定它只能在主页上工作，但在其他页面上，媒体查询不起作用，javascript 也不能​​正常工作，这意味着它可以正确获取主页宽度，但不能正确获取其他页面

如果 Javascript 在您的主页中，它不会在您的其他页面中触发。同样，如果您只将 CSS 文件链接到主页，这或许可以解释为什么它在其他页面上不起作用？

JS 代码在所有页面的页脚中，它会触发但在 if 语句之前警告窗口大小错误，并且 css 代码在所有页面中包含的主 css 文件中

我想我现在明白了。您还需要包含此行$(window).resize(viewportWidth = $(window).innerWidth())。这将在屏幕尺寸更改时更新您的变量，因为目前您只是在页面加载时初始化变量。

根本没有得到正确的宽度，即使 css 代码仍然可以在主页而不是其他页面上运行。还在想为什么其他页面显示错误的宽度