用javascript 怎样才能很好的获取手机的屏幕宽度和高度

Posted 2023-03-28

一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫viewport的页面绘制区域内（说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的）。viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=.5就可以让viewport和屏幕一致的尺寸，但这个比例在不同的手机上并不一定是2倍关系，特别是android手机，在大屏手机（5寸以上）上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

有一个非常曲线的解决办法，就是：css的媒体查询（@media）是能够检测屏幕尺寸（其实是浏览器窗体的真实尺寸，并不是屏幕的真实物理尺寸，介意的朋友就不要看了）的，通过它来给网页内的某个元素设置一个特殊的属性，然后再用javascript来获取这个属性值。当然这样只能获得一个阶梯值（比如480px到540px之间、540px到600px之间等等），不是精确值，所以可能得不偿失，因此我是不推荐的。 参考技术A

首先，请在html的head标签中添加下面这条语句：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

然后，使用下面的JS语句即可获得屏幕的宽度和高度：

var width = window.screen.width;
var height = window.screen.height;

参考技术B

js有获取浏览器宽度和高度的方法：

<script>
window.onload=function()
var seewid=document.documentElement.clientWidth;
var seehei=document.documentElement.clientHeight;
console.log('可视区高'+seehei+'可视区宽'+seewid);
</script>

参考技术C 这个是获取手机的高度console.log(window.screen.height);
这个是获取手机的宽度console.log(window.screen.width);
这个是获取网页可见区域的高度 console.log(document.body.clientHeight);
这个是获取网页可见区域的高度 console.log(document.body.clientWidth); 参考技术D 无论是手机端还是 PC 端，浏览器的宽高使用
document.documentElement.clientWidth
document.documentElement.clientHeight
都是兼容性很好的

screen.width啥的应该也没问题
可以上w3school网站找找相关的资料

我怎样才能用intellij在javascript中更漂亮的模板文字

【中文标题】我怎样才能用intellij在javascript中更漂亮的模板文字

【英文标题】：how can i prettier template literal in javascript with intellij

【发布时间】：2021-10-25 09:06:22

【问题描述】：

我在 javaScript 中使用模板文字

let innerHTML = `<div><span>like this</span></div>`;

是否可以像 intellij 中的 jsx 那样自动缩进或者更漂亮？

当我按下 [ ctrl + alt + l ] 时没有任何改变

我想自动制作这种格式

let innerHTML = `<div>
                     <span>
                         like this
                     </span>
                 </div>`;

有可能吗？

【问题讨论】：

如果粘贴到 HTML 文件中，这样的 HTML 片段格式是否正确？在 JSX 文件中它是否突出显示为 HTML（标签是否被识别？）？如果在声明之前添加 //language=HTML 注释会有所帮助吗？

"//language=HTML" 是非常合适的解决方案，谢谢您的评论。

【参考方案1】：

如果您使用的是 Visual Studio Code，则可以使用此扩展：https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html

（我相信其他 IDE 也有等效的扩展）