友情提示：垃圾评论一律封号,下载出错或任何技术问题请联系QQ
html5手机端页面缩放问题的解决详解-H5教程
所需积分：0
亲，积分不够，多去发布资源、评论、签到、
或联系QQ人工充值
用户名/邮箱
两周内免登录
注册即送5积分HTML5 移动页面自适应手机屏幕宽度详解
转载 & & 投稿：lqh
这篇文章主要介绍了HTML5 移动页面自适应手机屏幕宽度的相关资料,需要的朋友可以参考下
网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。&
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.userA
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"&‘);
document.write(‘&meta name="viewport" content="width=640, target-densitydpi=device-dpi"&‘);
document.write(‘&meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"&‘);
&对于此标签还有以下需要分享：
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)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。
以上是使用viewport标签的一些小体会，分享给大家。
3、百分比法，首先应明确一个概年，CSS中的百分比中的百指的是什么，我告诉你指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是百，子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。
4、使用css3单位rem，有人这样解释rem，root-em，就是根部的em，想必em大家都懂的，那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸，默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时，1rem=20px，那么32px=1.6rem了。到这里我们也就了解了rem的用法了，那么怎么用rem来实现不同尺寸屏幕的自适应呢？在页面载入开始时首先判断window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width），两者的差别请自行查阅），假设宽度为W，一个div在宽度为640px的设计稿的下的宽度为dW1，这样如果html的font-size为100px，那么这个div的宽度用rem表示是多少呢？计算：div宽度dW2=dW1/100,px与rem之间很好换算，除以100就可以，这是假定屏幕宽度为640的，而不同宽度的屏幕怎么处理，为了能保证换算容易那就要为html设置一个合适的font-size，计算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;
解释一下为什么把100作为一个缩放比例，用10或1不是更方便吗，这是因为大多数浏览器font-size的最小值为12px，所以只能用100了。所以会在头部加上这个JS代码
&script type="text/javascript"&
var html = document.querySelector(‘html‘);
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + "px";
5、媒体查询，媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式，可以这样写，@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路，关于媒体查询的详细用法请参阅css手册。
综上，至今，我没有找到一种完全适应各种屏幕的方法，只能根据页面特点选择不同的方法，多种方法灵活运用，才是王道。
通过此文，希望能帮助大家解决HTML5 自适应手机屏幕宽度的问题，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具React 中文文档 (v16)
React-用于构建用户界面的 JAVASCRIPT 库
CSS3参考手册
CSS3参考手册 - 最新最全的CSS参考手册，CSS3属性集合，CSS3 Properties, CSS3, CSS3手册, CSS3参考手册
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
web在线直播课
潭州教育是中国较早的在线教育平台,教学内容涵盖网络营销,java,javascript,jquery,android,ios,mysql,围棋,刺绣,养殖,农业,手艺,网页设计,平面设计,影视后期,CAD建筑机械,网络营销,商战智慧,办公软件,三维设计,工业设计,淘宝摄影,英语,音乐,大学代理,Photoshop教程,
Max教程,Maya教程,CAD教程,会声会影教程,AI教程,淘宝开店,摄影教程,免费教程,素材下载等众多在线学习精品课程。经过10年的发展,潭州教育已经发展为中国规模较大的在线教育平台。
JavaScript 代码片段
精心挑选的有用的 JavaScript 代码片段，你可以在30秒或更短的时间内理解。
Parcel 中文文档
快速，零配置的 Web 应用程序打包器
您的位置： » 分类:
» 文章: js实现的高度自适应
您可能感兴趣的文章
近期最热文章
关注WEB前端开发公众号所有回答(5)
按正方形等比缩放， 你可以用js控制。 &控制一个参数（width或height）就行； &
&script type="text/javascript"&
$(function(){
var imglist =document.getElementsByTagName("img");
//安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持
window.onresize = function(){
//捕捉屏幕窗口变化，始终保证图片根据屏幕宽度合理显示
function doDraw(){
_width = window.innerW
for( var i = 0, len = imglist. i & i++){
DrawImage(imglist[i],_width);
function DrawImage(ImgD,_width){
var image=new Image();
image.src=ImgD.
image.onload = function(){
//限制，只对宽高都大于30的图片做显示处理，换成你想要的宽度。
if(image.width&30 && image.height&30){
if(image.width&_width){
ImgD.width=_
ImgD.height=(image.height*_width)/image.
ImgD.width=image.
ImgD.height=image.
园豆：3266
一般我们是不控制图片的&图片都是宽度100%&高度auto
要控制的是装图片的容器宽度一般我们开发手机页面都用Bootstrap&你可以参考下
园豆：1514
图片自适应？ &height 根据整个页面的百分比计算，width就来100%吧！
（比如：页面height：1500px，图片为heig：60px。则就可以设置图片高为：4%，）
这样我基本可以解决图片自适应的问题！嘻嘻
宽度为100%，高度为auto，即width：100%；height:&
比如 外层的class=box
var w=$(".box").width();// 这里获取到宽度
$(".box").height(w) //然后让宽度等与高度就是正方形
清除回答草稿
&&&您需要以后才能回答，未注册用户请先。网页页面宽度自动适应手机屏幕
查看: 2054|
随着移动客户端变得越来越普遍，更多的用户会使用手机来访问网站，普通的网页在手机端上肯定会体现很不好；对于这个问题我们大可以通过来实现匹配不同的分辨率的客户端，那么，除了使用响应式外，我们如何设置使得手机网站的宽度能够自动适应手机屏幕的大小呢？下面介绍两种方法解决这个问题。方法一：在网页的&head&中增加以下这段代码，可以让网页的宽度自动适应手机屏幕的宽度。&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /&其中：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" /&方法二：把页面最顶部类似下面这段代码：&!DOCTYPE ........&替换为：&!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&注：此方法在iPhone下横屏时宽度会超过屏幕宽度出现滚动条，解决方法就是加上方法一的代码即可。
文章来源 ，欢迎分享，转载请注明地址：
上一篇：下一篇：
12345678910