html如何在手机上可以全屏显示_百度知道如何让网页自适应手机屏幕分辨率
[问题点数：40分，结帖人u]
如何让网页自适应手机屏幕分辨率
[问题点数：40分，结帖人u]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。您的位置：&&html布局的一种宽度自适应解决方案
目前市面上的显示器分辨率是越来越大，而对网页显示而言意味着一屏可以显示更多的内容『一屏：网页右边没有滚动条、下边也没有滚动条浏览器最大化所可以显示内容区域；这不是一个正规词汇，仅为此文方便书写而生造』。对html布局而言，传统的960px『或者鄙人常用的980px』宽度在大分辨率显示上显示时左右两边则会留下富余的空白空间，当分辨率达到23寸的1920px时传统的980px宽度网页布局则意味着显示器上的一半宽度的位置被闲置......考虑到17寸非主流脑残显示器依然占有不少的份额，同时为大分辨率显示器做适当的适配，一种网页宽度自适应布局应运而生，本文所说的宽度自适应仅仅指pc端的宽度自适应。理论基点：1、最小尺寸分辨率（传统17寸显示器），则可以采用940px、960px、或者鄙人常用的980px作为最小宽度2、之后稍大的分辨率就是了，则可以采用1200px或者1220px作为稍大的网页宽度3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签4、不支持css3、html5的脑残浏览器特别是&=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。6、宽度自适应为不同宽度显示器写布局元素时常用的css
.wrap { display:none;}.wrapBig .xxx { width:xxpx;}.wrapSmall .xxx { width:xxpx;}
实现方式：1、高级浏览器方式，通过media Queries直接控制，比如控制宽度的div类名叫wrap，则有如下代码，此代码仅作抛砖引玉
/**max width 980px**/@media screen and (max-width:1200px) { .wrap { width:980px; }}/**max1280px screen***/@media screen and (min-width:1200px) { .wrap { width:1200px; }}
稍微解释下：第一段当浏览器的可显示区域宽度小于1200px时就将类名为wrap的宽度设置为980px，当浏览器的可显示区域大于1200px时则将类名为wrap的宽度设置为1200px。css3的media queries可以通过拖拽浏览器窗口大小即时显示效果！这样在17寸显示器上时就不会在浏览器的下方出现滚动条，而在大于17寸的显示器上时可以让网页布局宽度增大到1200px，显示更多的内容。2、低级脑残浏览器通过js实现，为了便于调试，同时采用resize事件让网页跟随浏览器窗口大小改变而改变布局元素的宽度，如下代码也进做抛砖引玉
var windowSize=function () { var winWidth,winHeight; //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小 if (document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //返回对象结果 return {'width':winWidth,'w':winWidth,'height':winHeight,'h':winHeight};}//上述代码通过windowSize方法返回当前浏览器一屏窗口的宽度与高度【注意此处一屏的概念】$(document).ready(function ()
{ var PageStyle= function () { var SysWidht = windowSize().width,wrap=$('.wrap');//此处也可以使用jquery的$(window).width()获取页面宽度 if(SysWidht&1200) { wrap.removeClass('wrapBig').addClass('wrapSmall'); }else { wrap.removeClass('wrapSmall').addClass('wrapBig'); } }; /*init*/ PageStyle(); /*event*/ $(window).resize(function () { PageStyle(); });});//注意，此处引用了jquery ！！！//上述代码在页面加载完毕后自动调节类名为wrap的布局元素的类名称 然后在css中依据不同的类名写css代码
稍微解释下原理：通过js读取浏览器的窗口一屏大小，然后调节关键的类名为wrap的布局标签的类名，然后在css中书写相关宽度代码，因为采用了jquery的resize方法[实际就是resize事件]，利用该事件当浏览器窗口大小改变时执行相关代码。那么此段代码放在页面核心js中时势必会在所有浏览器中都执行，这个时候可以使用ie独有的hack触发，假设上述js代码写入在一个单独的js文件中，html中的示例代码如下
&!DOCTYPE html&&!--[if lte IE 6 ]& &html class="ie ie6 lte_ie7 lte_ie8" lang="zh-CN"& &![endif]--&&!--[if IE 7 ]& &html class="ie ie7 lte_ie7 lte_ie8" lang="zh-CN"& &![endif]--&&!--[if IE 8 ]& &html class="ie ie8 lte_ie8" lang="zh-CN"& &![endif]--&&!--[if IE 9 ]& &html class="ie ie9" lang="zh-CN"& &![endif]--&&!--[if (gt IE 9)|!(IE)]&&!--&&html lang="zh-CN"& &!--&![endif]--&&head&&meta charset="UTF-8"&&meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/&&title&宽度自适应 -demo&/title&&meta name="author" content="Jea Yang()"/&&meta name="description" content=""/&&meta name="keywords" content=""/&&meta name="viewport" content="width=device-width"/&&link rel="stylesheet" href="./Public/Style/reset.css"/&&script type="text/javascript" src="./Public/Js/jquery-1.8.1.min.js"&&/script&&!--[if lt IE 9]&&script src="./Public/Js/html5.js"&&/script&&script src="./Public/Js/lte-ie8.js"&&/script&&![endif]--&&/head&
上述html代码中的&!--[if lt ie 9]--&&![endif]--&之间引入该js文件即可；不再多做解释如此，低级脑残浏览器下的则相关核心css代码则如下：
/**for ie adjust width auto commen**/.wrapBig { width:1200px; margin:0 auto;}.wrapSmall { width:980px; margin:0 auto;}
对脑残低级浏览器如此处理后，当拖拽脑残低级浏览器的窗口大小时页面布局也会跟随变化。===============此文仅作原理阐述
转载请注明本文标题和链接：《》
邮箱（必填）
网址（选填）网页宽度自动适应手机屏幕宽度的实现代码(viewport)
作者：佚名
字体：[ ] 来源：互联网 时间：08-11 15:18:20
这篇文章主要介绍了网页宽度自动适应手机屏幕宽度的实现代码,需要的朋友可以参考下
一般的写法如下：
&name=&viewport&&content=&initial-scale=1.0&&&
较多的写法：
1.&name=&viewport&&content=&width=device-width,&initial-scale=1.0,&minimum-scale=0.5,&maximum-scale=2.0,&user-scalable=yes&&&&&& &&
在网页的&head&中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。 其中： width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=0.5：表示最小的缩放比例 maximum-scale=2.0：表示最大的缩放比例 user-scalable=yes：表示用户是否可以调整缩放比例 如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：代码如下:&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /&这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style=&width:100%&，整个页面在设备上看起来就是全屏的了。
大家感兴趣的内容
12345678910
最近更新的内容}