webapp开发—手机屏幕分辨率和浏览器分辨率不要混淆

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

css代码如下:

@media screen and (min-width:1080px)｛    ..............................  ｝

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

我们可以通过如下代码检测所用的浏览器的分辨率:
[html] view plain copy 在CODE上查看代码片派生到我的代码片

document.write("浏览器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight ); document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height);

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


@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){
..................................
}

webapp开发—手机屏幕分辨率和浏览器分辨率不要混淆相关推荐

html手机分辨率选择,[HTML5]手机屏幕分辨率和浏览器分辨率
在使用CSS3的中有如下类似代码 Html代码 @media screen and (max-width:480px){ -- } 意思是在最大宽度为480px的设备上应用{}里面的样式.这里的wid ...
android 获取屏幕编号,怎样获取Android手机屏幕的大小（分辨率、密度）
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FUL ...
关于手机屏幕分辨率与手机浏览器分辨率的差别
为什么80%的码农都做不了架构师?>>> 在调试手机网页时,发现手机屏幕分辨率与手机浏览器分辨率的差别,手机浏览器分辨率是很小的,1080P的屏幕,手机浏览器的分辨率宽度才36 ...
手机屏幕录制软件分享
经常遇到亲朋好友手机操作遇到问题不会解决,就问我,于是找了下现在流行的一些手机屏幕录制软件,现分享我比较看好的两款. 这款软件可以录制手机屏幕也可以将手机屏幕投影到浏览器中: http://yunpa ...
H5网页开发新手入门-H5网页如何适应不同手机屏幕分辨率？
一.问题汇总手机网页怎么制作? 怎么让网页适应不同手机屏幕? H5网页设计到底该设计多大尺寸? rem怎么自适应布局? H5一屛页面如何自适应屏幕? viewport该怎么写? width=devi ...
android开发获取手机屏幕分辨率
android开发基础过程中获取手机屏幕分辨率用来加载不同的UI,图片等,如何获取手机屏幕分辨率? DisplayMetrics displayMetrics=new DisplayMetrics() ...
分辨率自动调节html,如何让网页自适应手机屏幕分辨率_html/css_WEB-ITnose
我做的网页感觉在不同屏幕分辨率下显示效果不同,现在又什么好的办法解决这个问题没,能让网页自适应屏幕分辨率并且布局保持不变不管多大屏幕显示的是整个页面的放大或缩小之后的布局回复讨论(解决方案) w ...
Android适配获取手机屏幕的分辨率
如何将一个应用程序适配在不同的手机上,虽然这不算是一个技术问题,但是对于刚刚做屏幕的开发人员来说,还真不是一件多么简单的事情. 首先:你需要在AndroidManifest.xml文件的<man ...
移动端页面按手机屏幕分辨率自动缩放的js
1 <script> 2 var phoneWidth = parseInt(window.screen.width); 3 var phoneHeight = parse ...

webapp开发—手机屏幕分辨率和浏览器分辨率不要混淆

webapp开发—手机屏幕分辨率和浏览器分辨率不要混淆相关推荐

最新文章

热门文章