JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

手机的屏幕有大有小，移动web最好做成响应式布局，也就是自适应屏幕，没有固定宽高，这样的话，在所有手机上都可以正常显示。关于移动端页面按手机屏幕分辨率自动缩放的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,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">');
 // andriod 2.3以上
 } else {
 document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
 }
 // 其他系统
 } else {
 document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">');
 }
</script>     

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

var phoneScale = phoneWidth/750;

除以的为设计图设计的页面宽度，750是按iphone6来设计（根据自己使用需求来修改），即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率，从而达到适应手机的效果。

（注意，有时候页面加了这段代码在调试的时候，切记刷新，刷新过后就会按手机缩放比例显示）

概念解析：

phys.width:一般我们所指的宽度width即为phys.width，物理宽度（物理分辨率）

device-width:又称为css-width，设备宽度（逻辑分辨率）

其中我们可以获取phys.width通过document.documentElement.clientWidth;

而获取css-width通过 window.screen.width获取。

所以这里  phoneWidth（逻辑分辨率） = parseInt(window.screen.width);

如iphone6的phys.width为750px，而css-width为375px。

明白一个浏览器默认行为。

试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如：safari iphone：980px;

opera:850px;

Andriod webkit:800px;

IE:974px;

然后会把这个980px虚拟窗口装进宽度为750px的iphone6中，当然这样的话必须缩放，这就是为什么在手机中展现电脑端页面没有出现横向滚动条，而且字迹明显变小的原因。

initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+'

这段代码切记要指定 initial-scale=***，在安卓系统中，不指定默认的nitial-scale=***，只指定最小和最大缩放值，也可以正常显示，但是safari浏览器则会失效，对于宽度是100%的页面， 则显示为页面的30%左右的宽。

target-densitydpi=device-dpi

WebKit内核默认按照160的DPI来排版。假如设备真实DPI是480，宽度是1080，在WebKit会按160DPI，360宽度来排版。排版结束后在放大到1080宽。

所以当取window.innerwidth之类的值的时候，取的是WebKit实际排版宽度360，而不是1080.

target-densitydpi=device-dpi可以强制内核以480DPI排版，使画面更精细，window.innerwidth也将为屏幕宽度1080.

但WebKit从去年开始取消了对target-densitydpi的支持。（所以现在不建议写该属性了）

想实现target-densitydpi=device-dpi的效果有什么方法？提交此次补丁的WebKit开发者说可以用responsive images 和 CSS device units来替代。

参考链接：

http://www.jb51.net/article/121524.htm

http://www.jb51.net/article/121515.htm

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对我们的支持!

赞 (0)

相关推荐

  • 关于meta viewport中target-densitydpi属性详解（推荐）

    关于meta viewport中target-densitydpi属性详解（推荐）

    前段时间在做WAP页面,发现页面设置了meta viewport中的大众属性,即: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >  但发现页面依旧不根据手机屏幕进行自动缩放,后来找其他同事帮忙解决了,我看了源代码发现了是在原来的viewport中增加了target-densitydpi属性.看之初不太了解,也因为当时自己手

  • 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取.如iphone6的phys.width为750px,而css-width为375px. 二.明白一个浏览器默认行为. 试

  • 浏览器缩放检测的js代码

    测试代码 http://jsbin.com/dipijeqi/11 效果: chrome 复制代码 代码如下: window.devicePixelRatio : 2  (准确) screen.deviceXDPI / screen.logicalXDPI : NaN window.outerWidth / window.innerWidth : 2 document.documentElement.offsetHeight / window.innerHeight : 0.0206185567

  • Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结（附代码）

    可能大家发现自己制作的手机端页面,默认打开的时候并不是在理想的缩放状态下. 遇到这样的问题,需要在head标签下,添加meta解决. 代码如下: <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0″/> //控制默认缩放大小.最小缩放大小.最大缩放大小.通过这个可以设置用户的最大和最小缩放程度. <

  • java 查询oracle数据库所有表DatabaseMetaData的用法(详解)

    一 . 得到这个对象的实例 Connection con ; con = DriverManager.getConnection(url,userName,password); DatabaseMetaData dbmd = con.getMetaData(); 二. 方法getTables的用法 原型: ResultSet DatabaseMetaData.getTables(String catalog,String schema,String tableName,String []type

  • jQuery实现响应浏览器缩放大小并改变背景颜色

    /*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //并且在页面加载时即调用 myfunction();

  • JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

    手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率 var u

  • 根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码

    既判断分辨率,也判断浏览器 重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码. 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024=""; var IE800=""; var IE1152=""

  • Android编程获取手机屏幕分辨率大小的方法

    本文实例讲述了Android编程获取手机屏幕分辨率大小的方法.分享给大家供大家参考,具体如下: import android.app.Activity; import android.os.Bundle; import android.util.DisplayMetrics; import android.widget.TextView; public class A03Activity extends Activity { private TextView mTextView01; /** C

  • HTML5 移动页面自适应手机屏幕宽度详解

    网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max

  • C#如何实现监控手机屏幕(附源码下载)

    最近做了一个项目,里面有涉及到监控PC桌面和监视手机屏幕的功能,客户需要在PC电脑上和安卓手机上都能够观看对方的屏幕,而对方的设备既可以是PC电脑,也可以是安卓手机. 为了便于以后复习,我把这个屏幕监控的功能单独提出来做了个Demo名为ScreenMonitor来记录备忘,顺便也分享给大家. 该Demo一个包括3个项目:服务端.PC客户端.安卓客户端. 文末除了将ScreenMonitor整个项目的源码提供下载,也专门给出了可以直接部署的版本,供大家直接部署测试. 接下来,我将给大家介绍整个功能

  • Android编程基础之获取手机屏幕大小(DisplayMetrics应用)示例

    Android编程基础之获取手机屏幕大小(DisplayMetrics应用)示例

    本文实例讲述了Android获取手机屏幕大小的方法.分享给大家供大家参考,具体如下: 这里主要用了三个对象TextView ,Button ,以及DisplayMetrics ,其中Displaymetrics 是取得手机屏幕大小的关键类,这个例子非常的简单,当我们点击按钮,触发事件,在TextView 里显示手机屏幕的宽高分辨率． 看一下效果图: 按钮触发前: 按钮触发后: 其中我们在res->layout->values->string.xml增加了两行如下: <string

  • Android中获取手机屏幕大小的方法

    Android中获取手机屏幕大小的方法

    本文为大家解析Android中如何获取手机屏幕大小,提供一个解决方法,分享给大家供大家参考,具体内容如下 运行效果图: 运行程序后,当我们点击Button按钮时,可以看到下面的效果图: 具体代码: 我们可以通过使用类DisplayMetrics来获取手机屏幕的分辨率大小.DisplayMetrics类是获取手机屏幕各种属性的关键类.下面通过例子来展示如何获取手机屏幕的分辨率. 在布局文件main.xml中添加一个TextView对象,一个Button对象.其中TextView对象用来显示获得的分

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

    手机站开发遇到一些问题,设计页面使用多大的尺寸?为此做了一些研究,除IPhone特殊一些外,目前市面上的安卓系统的实际显示页面的宽度,都是360px. 手机型号 竖屏宽度 IPhone 5 320px IPhone 6 375px IPhone 6 Plus 414px Nexus 4 384px Android(大多数) 360px 前两年,安卓的分辨率多数还是240px 或 320px,现在是360px,为了向下兼容,向上也兼容,最终将 360px 定为设计的尺寸,后期可以使用CSS3 Me

  • 移动开发之自适应手机屏幕宽度

    移动开发之自适应手机屏幕宽度 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&qu

  • javascript判断移动端访问设备并解析对应CSS的方法

    本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法.分享给大家供大家参考.具体分析如下: javascript判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的): 复制代码 代码如下: // 判断是否为移动端运行环境  if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel

随机推荐