手机屏幕尺寸测试——手机的实际显示页面的宽度

最新推荐文章于 2025-04-10 10:38:34 发布

原创最新推荐文章于 2025-04-10 10:38:34 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

移动端专栏收录该内容

1 篇文章

订阅专栏

本文探讨了手机站页面设计的最佳尺寸实践，指出当前大多数安卓设备的实际显示宽度为360px，并提供了针对不同设备的兼容策略及屏幕尺寸测试的JS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手机站开发遇到一些问题，设计页面使用多大的尺寸？为此做了一些研究，除IPhone特殊一些外，目前市面上的安卓系统的实际显示页面的宽度，都是360px。

手机型号	竖屏宽度
IPhone 5	320px
IPhone 6	375px
IPhone 6 Plus	414px
Nexus 4	384px
Android(大多数)	360px

前两年，安卓的分辨率多数还是240px 或 320px，现在是360px，为了向下兼容，向上也兼容，最终将 360px 定为设计的尺寸，后期可以使用CSS3 Media Queries即媒体查询特性做进一步的兼容，兼容其他设备，以及做一些设备的横屏的兼容。

附：屏幕尺寸测试的JS代码，如下

?

 
         <!DOCTYPE html>
        

 
          
         <
         title
         >屏幕尺寸测试</
         title
         >
        

 
          
         <
         meta 
          http-equiv
         =
         "Content-type" 
          content
         =
         "text/html; charset=utf-8"
         >
        

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

 
          
         <
         meta 
          name
         =
         "apple-mobile-web-app-capable" 
          content
         =
         "yes" 
          />
        

 
          
         <
         META 
          HTTP-EQUIV
         =
         "Pragma" 
          CONTENT
         =
         "no-cache"
         >
        

 
         <
         body 
          style
         =
         "padding:0px;margin:0px;" 
          scroll
         =
         "no"
         >
        

 
             
         <
         script 
          language
         =
         "javascript"
         >
        

 
         var s = "";

 
         s += "网页可见区域宽："+ document.body.clientWidth;

 
         s += "<
         br
         >网页可见区域高："+ document.body.clientHeight;

 
         s += "<
         br
         >网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";

 
         s += "<
         br
         >网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";

 
         s += "<
         br
         >网页正文全文宽："+ document.body.scrollWidth;

 
         s += "<
         br
         >网页正文全文高："+ document.body.scrollHeight;

 
         s += "<
         br
         >网页被卷去的高："+ document.body.scrollTop;

 
         s += "<
         br
         >网页被卷去的左："+ document.body.scrollLeft;

 
         s += "<
         br
         >网页正文部分上："+ window.screenTop;

 
         s += "<
         br
         >网页正文部分左："+ window.screenLeft;

 
         s += "<
         br
         >屏幕分辨率的高："+ window.screen.height;

 
         s += "<
         br
         >屏幕分辨率的宽："+ window.screen.width;

 
         s += "<
         br
         >屏幕可用工作区高度："+ window.screen.availHeight;

 
         s += "<
         br
         >屏幕可用工作区宽度："+ window.screen.availWidth;

 
         s += "<
         br
         >你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";

 
         s += "<
         br
         >你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

 
         document.write(s);

 
         </
         script
         >