首页 > 代码库 > webapp开发--手机屏幕分辨率同内置浏览器分辨率

webapp开发--手机屏幕分辨率同内置浏览器分辨率

2024-07-14 15:58:30   229人阅读

关于webApp响应式设计遇到的问题，分享给大家，最近在做一个手机webApp，因为我手机是”米3“，屏幕截图大小是1080宽，所以css样式用 @media screen and(min-width:1080px){ ...... }，来判断屏幕最小宽度是1080px的手机web显示什么样的样式，结果却不能正常显示我所指定的css样式，最后在网上查了一下，发现分辨率的范围不 对惊恐。


css代码如下:

?
1
2
3
   @media screen and (min-width:1080px)｛ 
     ..............................
｝

意思是在小宽度为1080px的设备上应用{}里面的样式。这里的width，注意是手机浏览器的分辨率，而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960x640。而其自带的Safari浏览器的分辨率是320*480。米3手机屏幕分辨率是1080宽，浏览器分辨率却是360px宽惊讶。

我们可以通过如下代码检测所用的浏览器的分辨率:

?
1
2
3
4
<script type=‘text/javascript‘>
document.write("浏览器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight );
document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height);
</script>


手机不同浏览器分辨率分区响应式设计css代码：

?
1
2
3
4
5
6
7
8
9
@media screen and (min-width: 320px){
....................................
}
@media screen and (min-width: 241px) and (max-width: 320px){
...................................
}
@media screen and (min-width: 1px) and (max-width: 240px){
..................................
}


联系
我们