首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 手机屏幕尺寸

在JavaScript中获取手机屏幕尺寸,主要涉及到window.screen对象,它提供了关于用户屏幕的信息。以下是一些基础概念和相关信息:

基础概念

  1. window.screen.width/height: 这两个属性返回屏幕的宽度和高度,单位是像素。这通常指的是浏览器窗口可以使用的最大宽度和高度,而不是整个手机屏幕的尺寸。
  2. window.innerWidth/innerHeight: 这两个属性返回浏览器窗口内部的宽度和高度,包括滚动条(如果存在的话)。
  3. window.outerWidth/outerHeight: 这两个属性返回浏览器窗口外部的宽度和高度,包括浏览器边框、工具栏等。

相关优势

  • 响应式设计: 了解屏幕尺寸可以帮助开发者创建适应不同屏幕大小的网站或应用。
  • 用户体验优化: 根据屏幕尺寸调整布局和内容,可以提供更好的用户体验。

应用场景

  • 移动端适配: 在移动端开发中,根据屏幕尺寸调整布局是非常重要的。
  • 广告位设计: 根据屏幕尺寸动态调整广告位的大小和位置。

示例代码

代码语言:txt
复制
// 获取屏幕的宽度和高度
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;

// 获取浏览器窗口内部的宽度和高度
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;

// 获取浏览器窗口外部的宽度和高度
var outerWidth = window.outerWidth;
var outerHeight = window.outerHeight;

console.log("Screen Width: " + screenWidth);
console.log("Screen Height: " + screenHeight);
console.log("Inner Width: " + innerWidth);
console.log("Inner Height: " + innerHeight);
console.log("Outer Width: " + outerWidth);
console.log("Outer Height: " + outerHeight);

常见问题及解决方法

  1. 屏幕尺寸不准确: 有时候window.screen.width/height返回的值可能不准确,特别是在有虚拟按键的手机上。可以使用window.visualViewport来获取更准确的视口尺寸。
代码语言:txt
复制
var visualViewportWidth = window.visualViewport.width;
var visualViewportHeight = window.visualViewport.height;

console.log("Visual Viewport Width: " + visualViewportWidth);
console.log("Visual Viewport Height: " + visualViewportHeight);
  1. 屏幕旋转问题: 当手机屏幕旋转时,屏幕尺寸会发生变化。可以监听resize事件来处理这种情况。
代码语言:txt
复制
window.addEventListener('resize', function() {
    var newScreenWidth = window.screen.width;
    var newScreenHeight = window.screen.height;
    console.log("Screen resized to: " + newScreenWidth + "x" + newScreenHeight);
});

通过这些方法和技巧,开发者可以更好地处理不同屏幕尺寸的设备,提供更好的用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • iPhone 各屏幕尺寸及解析

    一.iPhone 各屏幕尺寸表 手机型号 屏幕尺寸(inch) 像素密度(PPI) 逻辑分辨率 (point) 物理分辨率(屏幕分辨率)(pixel) 缩放因子(scale factor) 宽高比...屏幕尺寸 指的是显示屏的对角线长度,以下为iPhone5s、iPhone6s、iPhone6Plus屏幕尺寸规格示意图: 4....苹果曾经给出过一个标准:手机屏幕达到300PPI、平板屏幕达到220PPI、笔记本电脑屏幕达到200PPI即可认为是Retina屏幕。 5....大的屏幕同时必须要配备高分辨率,也就是在这个尺寸下可以显示多少个像素,显示的像素越多,可以表现的余地自然越大。...解释三: 从另外的角度来说:分辨率就是屏幕上横、纵的总象素点数。 如果我们设计的时候用单位px,可以说是物理分辨率尺寸。 如果我们设计的时候用单位pt,可以说是逻辑分辨率尺寸。

    3.3K20

    Android 获取屏幕尺寸与密度

    android中获取屏幕的长于宽,参考了网上有很多代码,但结果与实际不符,如我的手机是i9000,屏幕大小是480*800px,得到的结果却为320*533 结果很不靠谱,于是自己写了几行代码,亲测一下...测试参数: 测试环境: i9000(三星) 物理屏幕:480*800px density :1.5 测试代码: // 获取屏幕密度(方法1) int screenWidth =...回答是否定的,因为我也在模拟器、HTC G14物理机,以及ViewSonic、Galaxy平板上测试过,方法3在density=1.5时,放大了实际屏幕值,例如:HTC G14 在HTC G14上,实际屏幕大小...,直接通过dm.widthPixels、dm.heightPixels便得到了实际物理屏幕大小(540,960) 导致无法通过一种通用的方法获取真实物理屏幕大小的原因,可能就是因为Android系统开源...,不同的手机生产厂商没有统一的制造标准,来规定手机屏幕。

    2.6K30

    理一理屏幕尺寸那些事

    :1个物理毫米中所含的像素个数是不同的 ---- 2.手机英寸的概念 英寸是衡量手机屏幕的真实大小 我们买手机一般关心的是手机是多少多少英寸的,然后懂行的看看分辨率,那英寸代表什么?..."\n, 屏幕对角线物理尺寸/mm=" + relC + "\n, 屏幕横向物理尺寸/mm=" + relW + "\n, 屏幕纵向物理尺寸...尺寸解析.png 好吧,知道大家不喜欢看数据,于是我自定义了一个View,用ScreenInfo信息画个图示,感觉还蛮好的 三行代码就能画一个手机信息图,也不是很难,有兴趣的可以看看源码,或自己画画...我是按照物理尺寸画的,所以现实中它们的屏幕相对大小就是这样的!...屏幕尺寸.png 如果你想玩,其他的屏幕也可以试试:只要知道分辨率和多少英寸 ? 查看其他屏幕尺寸.png ---- 4.密度: 什么是密度?----紧密程度?

    93820

    理一理屏幕尺寸那些事

    :1个物理毫米中所含的像素个数是不同的 ---- 2.手机英寸的概念 英寸是衡量手机屏幕的真实大小 我们买手机一般关心的是手机是多少多少英寸的,然后懂行的看看分辨率,那英寸代表什么?..."\n, 屏幕对角线物理尺寸/mm=" + relC + "\n, 屏幕横向物理尺寸/mm=" + relW + "\n, 屏幕纵向物理尺寸...尺寸解析.png 好吧,知道大家不喜欢看数据,于是我自定义了一个View,用ScreenInfo信息画个图示,感觉还蛮好的 三行代码就能画一个手机信息图,也不是很难,有兴趣的可以看看源码,或自己画画...我是按照物理尺寸画的,所以现实中它们的屏幕相对大小就是这样的!...屏幕尺寸.png 如果你想玩,其他的屏幕也可以试试:只要知道分辨率和多少英寸 ? 查看其他屏幕尺寸.png ---- 4.密度: 什么是密度?----紧密程度?

    91820

    为任意屏幕尺寸构建 Android 界面

    在不同的设备上运行同一应用,都应该能够灵活适应不同设备的屏幕尺寸。...其中,较小型代表了竖屏模式下手机的典型模式,中等型代表了大部分平板电脑和更大的可折叠设备的尺寸,展开型则代表了平板电脑或更大的可折叠设备,或是桌面设备在横屏模式下的显示情况。...通过这种方式更新应用导航,无论屏幕尺寸如何都能够拥有相同的导航图,这意味着调整屏幕尺寸不会产生导航的变化,从而让用户感到困惑。...这也让 Compose 可以轻松解决不同屏幕尺寸而带来的界面更改。 接下来,让我们通过 JetNews 来向您展示如何通过 Compose 来进行不同屏幕尺寸的适配。...其中比较有趣的一点是思考应用如何在不同尺寸布局之间转换,例如对于可折叠手机,应用可能会从较大的屏幕变为较小的屏幕。

    4.2K20

    iPhone屏幕尺寸、分辨率及适配

    上表中的宽高(width/height)为手机的物理尺寸,包括显示屏和边框。...以下为iPhone4s的宽高示意图: 4.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸,指的是显示屏对角线的长度(diagonal)。...从分辨率的角度来看,iPhone6沿用二倍图(@2x),但需为iPhone6+提供更高的三倍图(@3x);从屏幕尺寸角度来看,需要重新对UI元素尺寸和布局进行适配,以期视觉协调。...苹果在WWDC2012 iOS6中已提出了Auto Layout的概念,即使用约束条件来定义视图的位置和尺寸,以适应不同尺寸和分辨率的屏幕。...、分辨率及其屏幕边长比例》 《iOS判断设备屏幕尺寸、分辨率》 《iOS8中的UIScreen》 《Detecting iPhone 6/6+ screen sizes in point values

    6.1K20

    创建支持多种屏幕尺寸的Android应用

    与此同时,系统提供APIs允许你控制应用界面为特定的屏幕尺寸和密度,为不同屏幕的配置提供最优化的用户界面设计。例如,你可能会要一个平板电脑的用户界面,这不同于手机的用户界面。...设计7寸平板的原因是非常复杂的,当时使用广义的尺寸组是指一个7寸的平板在技术上与一个5寸的手机在同一个组(大组)。...当设计UI时,可能关心的主要事情是,应用程序在手机类型的UI和多窗格的平板类型的UI之间切换时的实际尺寸。...使用表2中的这些尺寸限定符,应用程序可以在使用任何想要的宽度或高度的平板和手机的不同布局资源间切换。...对于其他情况,你要进一步自定义你的UI以区分如7寸和10寸平板的尺寸,可以定义额外的最小宽度布局: res/layout/main_activity.xml # 适用于手机 (小于600dp的可用宽度)

    2.7K60

    4.5寸以上是最爱:深度解读智能手机屏幕尺寸的发展史

    本文编译自Alex Barredo发表在Medium 上的文章,作者通过详细的数据分析,为我们深度解读了智能手机屏幕尺寸变化的历史与未来。...现在的趋势是,手机整机的尺寸在变大,但现代智能手机的发展是先变小而后再次增大的。...边框越来越小 几个月前,我发布了这张图片,列举了一些常用手机的屏占比(屏幕面积 / 整机面积)。 边框越小意味着在手机尺寸不变的情况下有着更大的屏幕,但是在今天的技术条件下,手机依然必须有边框。...在 5.3 寸的 Note 发布时,智能手机屏幕的平均尺寸还是 3.8 寸,三年后, 绝大部分 OEM 厂商生产的非平板手机的旗舰机型都在 5 寸以上了。 三星处于领先 三星选对了方向了吗?...我不想讨论市场上关于大屏 iPhone 的传言,但是由于 home 键等硬件限制,苹果的屏幕—边框比很低,与三星或 LG 同尺寸屏幕的手机相比,更大屏幕的 iPhone 更难用一只手操控。

    1.5K90

    杂篇:理一理屏幕尺寸那些事

    注:本文的目的在于理清楚一些尺寸关系,如果有表述不当,欢迎指出讨论 本文测试屏幕的长宽像素比为1,奇葩屏幕可跟根据比例自行分析 ---- 一、科普常识: 0.测试准备 手上有两个真机: oppoA77...,它们的n值不同 也就是两个手机:1个物理毫米中所含的像素个数是不同的 ---- 2.手机英寸的概念 英寸是衡量手机屏幕的真实大小 我们买手机一般关心的是手机是多少多少英寸的,然后懂行的看看分辨率..."\n, 屏幕对角线物理尺寸/mm=" + relC + "\n, 屏幕横向物理尺寸/mm=" + relW + "\n, 屏幕纵向物理尺寸...,也不是很难,有兴趣的可以看看源码,或自己画画 我是按照物理尺寸画的,所以现实中它们的屏幕相对大小就是这样的!...:1mm的屏幕放大 记得小时候的手机肉眼就能看到一点一点的像素,就是因为1mm里的像素点少,相对而言一粒像素就大 现在的手机可是瞅不出来像素了 ---- 5.ppi与dip 现在我们手上的信息还蛮多的

    89330

    手机屏幕接口介绍,你的屏幕闪过吗?

    屏幕是手机重要组成部分之一,有LCD和OLED两大类,LCD类型的屏幕需要单独的背光面板,非自发光,而OLED屏幕不需要背光面板,发光二极管可以自发光,因此LCD的对比度没有OLED高,一般来说OLED...同时OLED屏幕的功耗更低,因此很多高端机器倾向于使用OLED屏幕,追求极致的体验。 今天以OLED为主,介绍下屏幕接口的组成,屏幕接口电路部分主要包括电源、IO和通信引脚3大类。...现在市场上使用的折叠手机,由于需要折叠,表面不能有坚硬的玻璃盖板,因此在折叠位置容易出现折痕。...IIC/SPI用于与屏幕上的触控进行通信,MIPI用于传输屏幕的显示数据,为了降低功耗,当屏幕显示内容不变,也就是静态画面时,MIPI往往不工作,静态画面已经存储到屏幕内部存储中,比如手机的AOD息屏显示功能...此外屏幕对静电特别敏感,常用抑制ESD措施有堵和疏两种,因此屏幕周围的缝隙、屏幕和相机的缝隙、屏幕和听筒的缝隙要用防静电胶处理,在屏幕接口上也要保留TVS器件,来抑制ESD对手机的影响。

    4.8K20

    移动端页面按手机屏幕分辨率自动缩放的js

    var phoneHeight = parseInt(window.screen.height); 4 var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率...,在手机端的样式也会因此大乱,在页面头部加入以上一段js之后,在手机端就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度,750是按iphone6...来设计(根据自己使用需求来修改),即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机的效果。...试想,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,势必会放不下,手机端横向会出现滚动条,怎么阻止这种情况呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如...target-densitydpi=device-dpi可以强制内核以480DPI排版,使画面更精细,window.innerwidth也将为屏幕宽度1080.

    5.5K80

    【移动端】手机界面的设计尺寸

    从设计方面来看,做手机界面设计的尺寸一般分为iPhone和Android两种设备。...Android的常用逻辑分辨率: Android的常用逻辑分辨率:参考屏幕尺寸大全 360 * 640 、 360 * 720、 360 * 740、 360 * 760、 360 * 780、 360...* 800 411 * 731 480 * 853 iPhone的分辨率 设备 逻辑分辨率(point)(pt) 物理分辨率(pixel)(px) 屏幕尺寸(diagonal) 缩放因子(scale...屏幕尺寸 屏幕尺寸是指屏幕的对角线长度。...计算PPI,可以简单用勾股定理计算出对线上出现的像素,再除以对角线上长度: 我们知道,手机的屏幕是以像素的方式一个一个呈现出来的。PPI值越高,意味着有更细腻的画面。较低PPI的屏幕看起来有颗粒感。

    2.4K10
    领券