三d和值走势图带连线:广东快乐十分开奖记录

关闭

核弹头小游戏

游戏轻松点
无需下载,点开即玩

拿起手机!扫我啊

核弹头小游戏
无需下载点击即玩

回到顶部

当前位置: 广东快乐十分开奖记录 > 游戏教程 > 正文

html5怎么自适应屏幕大小源码

广东快乐十分开奖记录 www.qkktl.cn 来源:广东快乐十分开奖记录 www.qkktl.cn    作者:集   时间:2016-04-18

自适应屏幕大小是非常重要的,本文小编就为您详解html5怎么自适应屏幕大小。
现今,各种手机屏幕,pad屏幕大小层出不穷啊,什么尺寸都有,那么我们弄一个页面最好的当然是要能够自适应啦。广东快乐十分开奖记录怎么自适应屏幕大小呢?本文小编就教你,源码直接分享。

1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

首先解释该标签的含义:

meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

如果你完全不了解这个标签的使用需要先百度一下。

解释:content中的“width” 这个width指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备?。盒槟獯翱诘目矶?、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。

    <script type="text/javascript">
        var phoneWidth =  parseInt(window.screen.width);
        var phoneScale = phoneWidth/640;
        var ua = navigator.userAgent;
        if (/Android (\d+\.\d+)/.test(ua)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                document.write(‘<meta name="viewport" content="width=640, 
                  minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘,
                   target-densitydpi=device-dpi">‘);
            }else{
                document.write(‘<meta name="viewport" content="width=640, 
                                          target-densitydpi=device-dpi">‘);
            }
        } else {
            document.write(‘<meta name="viewport" content="width=640, 
                                         user-scalable=no, 
                                        target-densitydpi=device-dpi">‘);
        }
    </script>

对于此标签还有以下需要分享:

1)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

2)、initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

3)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

4)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

核弹头小游戏网发布此文仅为传递信息,不代表认同其观点或者证实其描述!
  • 西安一男子伙同他人制假 将工业醋酸变身食用醋 2018-11-26
  • 把市场经济说成计划经济是不是痴呆病? 2018-07-25
  • 2018年2月国家社科基金年度项目、青年项目和西部项目结项情况 2018-07-25
  • 十二届全国人大常委会第十五次会议 2018-07-24
  • 沃尔沃全新S60高性能版官图曝光 2018-07-23
  • 回复@张胜才2:辩证法告诉你给不同能力意愿行动的人分配同样多的资源? 2018-07-23
  • 日本民族将会为最终拥核而战!现在日本保有47吨钚足己制造6000枚核弹,并且日本具有资金和技术优势一星期之內就可拥核!冷眼细观世界笑骂指点江山 ... 2018-07-22
  • 西部网(陕西新闻网)www.cnwest.com 2018-07-21
  • 北京公园改造将引入无性别厕所--旅游频道 2018-07-21
  • 天津:互联网+政务服务推进放管服改革走向深入 2018-07-20
  • 女子痴迷鹿晗 商场门口对人形立牌拭泪亲吻 2018-07-19
  • 人民日报:术到极致近于道 2018-07-19
  • 紫光阁中共中央国家机关工作委员会 2018-07-18
  • 426| 366| 378| 889| 853| 742| 431| 129| 366| 86|