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

<script>        var phoneWidth = parseInt(window.screen.width);        var phoneHeight = parseInt(window.screen.height);        var phoneScale = phoneWidth/750; //除以的值按手机的物理分辨率        var ua = navigator.userAgent;        if (/Android (\d+\.\d+)/.test(ua)) {            var version = parseFloat(RegExp.$1);            // andriod 2.3            if (version > 2.3) {                document.write(‘<meta name="viewport" content="width=device-width, minimum-scale = ‘ + phoneScale + ‘, maximum-scale = ‘ + phoneScale + ‘, target-densitydpi=device-dpi, user-scalable=no">‘);                // andriod 2.3以上            } else {                document.write(‘<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, user-scalable=no">‘);            }            // 其他系统        } else {            document.write(‘<meta name="viewport" content="width=device-width, minimum-scale = ‘ + phoneScale + ‘, maximum-scale = ‘ + phoneScale + ‘, user-scalable=no, target-densitydpi=device-dpi">‘);        }    </script>

做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了,当拿到设计图的时候,图基本都是按物理分辨率来设计的,一般常用的为640(iphone5/5s)、750(iphone6/6s),而谷歌等浏览器采用小手机模式浏览页面的时候,上面的值为物理分辨率,调试的时候很难把控页面样式,在手机端的样式也会因此大乱,在页面头部加入以上一段js之后,在手机端就可以正常显示了,

var phoneScale = phoneWidth/750;

除以的为设计图设计的页面宽度,750是按iphone6来设计(根据自己使用需求来修改),即让页面的

 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机的效果。

(注意,有时候页面加了这段代码在调试的时候,小手机里依然没有按这个比例缩放,但是手机打开是缩放了的,那调试的时候就把物理分辨率数值自定义为逻辑分辨率的值,如750来调试样式,就跟手机看到的效果一样了。这个问题目前我还不明白是为什么,因为偶尔有时候在chrome的小手机里那个缩放等额比例就会生效,大多数不生效,还请大神指教)

时间: 2024-12-04 11:39:23

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

Android不同手机屏幕分辨率自适应【转】

有必要了解的 Android中常见的单位 dip, dp, px, sp之间的区别: dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素.px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多.pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用:sp: scal

手机屏幕分辨率术语:逻辑分辨率和物理分辨率

手机屏幕分辨率术语:逻辑分辨率和物理分辨率 发布于: 2015 年 5 月 13 日 by admin 最近在25学堂的群里,发现有好几位小伙伴们在询问一些关于智能手机屏幕的分辨率尺寸的问题.我也想肯定大多数的从事移动开发的小伙伴们也不是特别清楚,到底啥是逻辑分辨率和物理分辨率. 今天25学堂的老谭从个人的角度和一些极客的观点中汇总出来,给大家扫盲一下. 众所周知,手机屏幕分辨率是手机的重要参数之一. 大家都知道移动端设备屏幕尺寸非常多,碎片化严重.尤其是Android,你会听到很多种分辨率:4

Unity3D Android手机屏幕分辨率问题

Android手机屏幕分辨率五花八门,导致开发时不好把握,还好各个引擎对这个屏幕分辨率问题都有较好的处理方式:unity3D 也为我们提供了一个不错的解决方案. 在Unity3D 进行 android 游戏开发时,对于不同分辨率下的显示效果就像是摄像机的自动平移了一般,看了不少游戏,对于 Unity3D 开发 android 游戏貌似都没有做相应的屏幕分辨率的处理,而是随摄像机的自动移动,把场景做大些不至于出现空白背景. 其实 Unity3D 开发3D游戏,对于不同的分辨率,我们只需要设置 1

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

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

[HTML5]手机屏幕分辨率和浏览器分辨率

在使用CSS3的中有如下类似代码 Html代码 @media screen and (max-width:480px){ -- } 意思是在最大宽度为480px的设备上应用{}里面的样式.这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率.比如苹果4的手机屏幕分辨率是960x640.而其自带的Safari浏览器的分辨率是320*480.我们可以通过如下代码检测所用的浏览器的分辨率: Js代码 $("#info").html("(您的浏览器的分辨率为:&qu

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

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

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏:0      [点我收藏+] PC端 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.14.1寸.15寸; ) 1280*800(16:10  |15.4寸) 1280*1024(比例:5:4  | 14.1寸.15.0寸)

手机屏幕分辨率和浏览器分辨率

意思是在最大宽度为480px的设备上应用{}里面的样式.这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率.比如苹果4的手机屏幕分辨率是960x640.而其自带的Safari浏览器的分辨率是320*480.我们可以通过如下代码检测所用的浏览器的分辨率: Js代码   $("#info").html("(您的浏览器的分辨率为:"+($(document).width()+"*"+$(document).height())+&qu

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