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

关于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){

..................................

}

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

时间: 2024-11-06 03:40:19

webapp开发--手机屏幕分辨率同内置浏览器分辨率的相关文章

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

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

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

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

【微网站开发】之微信内置浏览器API使用

最近在写微网站,发现了微信内置浏览器的很多不称心的地方: 1.安卓版的微信内浏览器底部总是出现一个刷新.前进.后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩 2.分享当前网站至朋友圈时,分享的图片一般是网站的截图或者是首张图片,而分享的标题一般是网页title 3.当微网站图片很大或者需要加载耗费流量很大时,怎么提醒用户注意自己的网络状态呢? 就这最简单的两个问题,然后百度了一下,看了些研究过这个的牛们的博客,知道怎么搞了 为什么会有下面的toolbar,为什么会有那么个讨厌的底部栏?而且这个不

解决微信屏蔽内置浏览器的下载功能以及如何跳转到手机默认浏览器下载的实现

今天一后台同事问我:为什么从App里面分享到微信好友时,在微信里没有发下载分享里的软件,而在浏览器中却可以? 于是我在微信公众号中试了一下,发现果然不可以下载.通过google 发现,原来是微信屏蔽了内置浏览器的下载功能.那么有没有解决办法呢? 肯定是有的. 判断发现是在微信中打开,给提示让其从右上角选择在浏览器中打开,这样的效果对于用户体验来说肯定是差的.所以我们经过长时间的尝试找到一个更好的解决方式: 桔子跳转是一款基于微信后端开发了一款微信营销下载推广助手,使用了本插件生成的链接,用户在微

微信内置浏览器如何跳转到手机默认浏览器下载的实现

今天一后台同事问我:为什么从App里面分享到微信好友时,在微信里没有发下载分享里的软件,而在浏览器中却可以? 于是我在微信公众号中试了一下,发现果然不可以下载.通过google 发现,原来是微信屏蔽了内置浏览器的下载功能.那么有没有解决办法呢? 肯定是有的. 判断发现是在微信中打开,给提示让其从右上角选择在浏览器中打开,这样的效果对于用户体验来说肯定是差的.所以我们经过长时间的尝试找到一个更好的解决方式: 月牙跳转是一款基于微信后端开发了一款微信营销下载推广助手,使用了本插件生成的链接,用户在微

微信内置浏览器怎么才能自动跳转到手机自带浏览器

上半年公司有一个新的APP项目上线,我们在项目首页做个二维码,然后用户用手机扫一扫就能下载了.但是很多用户反映扫一扫之后下载不了,了解之后才知道这些用户都是使用的微信的扫一扫,而我们开发测试人员一般使用uc之类的浏览器做扫描.上网查了一下,微信自带的内置浏览器屏蔽了下载功能,所以才出现用微信扫一扫不能下载的情况.这时候我们一般会建议用户使用uc或者其他第三方浏览器自带的扫一扫功能下载.但是现在的微信太普及了,很多人都习惯性的使用微信来扫码下载,总不能每个用户都解释一遍,所以我们一直在寻找解决方案

【微信ticket跳转】手机浏览器网页跳转到微信内置浏览器打开

[微信ticket跳转]手机浏览器网页跳转到微信内置浏览器打开 起始不少人已经关注到了招行的智能客服:http://xyk.cmbchina.com/Latte/wx/20150520wkf?from=ISTA004&clientid= 招行的这个跳转,发现后台返回的这个数据{"returnCode":"0000","returnMessage":"success","url":"weix

微信开发-微信内置浏览器的Javascript API

源代码来自 http://www.baidufe.com/ /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.隐藏/显示底部浏览器工具栏 * 6.获取当前的网络状态 * 7.调起微信客户端的图片播放组件 * 8.关闭公众平台Web页面 * 9.判断当前网页是否在微信内置浏览器中打开 * 10.支持WeixinApi的错误监控 * 11.发送电子邮件 *

非微信内置浏览器中的网页调起微信支付的方案研究

问题来源 之前在app中集成过微信支付,当时还写了一篇扫坑贴,此种微信支付方式为app支付,即在我们自己的应用中嵌入微信支付SDK,由Native代码调起微信支付. 后来由于业务需要在我们app的WebView中打开第三方店铺的网页,在第三方网页中有微信支付按钮,测试反馈说ios可以调起微信支付,而android不可以.后来网上看到说微信内置Webview和京东的网页也可以调起微信支付,微信自己没什么奇怪的,而京东可以的话,如果它跟微信没什么合作协议的话,那么其他app应该也可以在网页中调用微信