H5⽹页开发新⼿⼊门-H5⽹页如何适应不同⼿机屏幕分辨率？
⼀、问题汇总
⼿机⽹页怎么制作？
怎么让⽹页适应不同⼿机屏幕？
H5⽹页设计到底该设计多⼤尺⼨？
7月14日是鬼节吗rem怎么⾃适应布局？
H5⼀屛页⾯如何⾃适应屏幕？
viewport该怎么写？
width=device-width如何⾃适应不同⼿机屏幕的？
css3的rem单位怎么使⽤？
如何通过media媒体查询实现⽹页⾃适应屏幕？
怎么使⽤100%百分⽐做⾃适应布局？
如何使⽤js改变zoom缩放⽹页⾃适应⼿机屏幕？
中考查询>纸嫁衣4第四章通关攻略如何使⽤js改变html的font-size进⾏⽹页⾃适应？
H5⽹页字体⼤⼩设置多⼤⽐较合适？
英语四级听力技巧H5⽹页字体⼤⼩设计规范是什么？
H5页⾯字体⼤⼩如何⾃适应⼿机屏幕？
移动端H5⽹页字体⼤⼩font-size该⽤px、em还是rem?
有没有前端框架可以解决⾃适应布局？
bootstrap怎么⾃适应布局？
更多⽹页⾃适应、字体⼤⼩等问题… …
总结：看来⼤家遇到的移动端H5⽹页设计问题还真不少，恭喜你们终于到最好的解决⽅案了，请仔细阅读以下内容，⼀定有所收获。
⼆、⼩⽩科普
2.1 ⼿机尺⼨、屏幕⼤⼩和分辨率之间的关系
我们经常会听到的就是⼿机⼴告上说到词语，苹果⼿机6，4.7⼨、5.5⼨，还有曾经的3.5⼨，4.0⼨，当然也还有现在⽐较流⾏的全⾯屏⼿机6.0⼨，还有⼀些平板或pad尺⼨⽐如7.9⼨，9.7⼨，12.9⼨。说了这么多尺⼨，是不是⼤家有点晕了，下⾯说正题。
⼿机尺⼨：指⼿机屏幕对⾓长度，以英⼨的单位，1英⼨=25.4MM。也可以⽤尺⼦量⼀下长度多少毫⽶，然后除以25.4就是⼿机的尺⼨。
⼿机屏幕⼤⼩：这个需要跟⼤家举个例⼦说明了，最简单的⽐较就是苹果4s与苹果5s⽐，它们的⼿机屏幕宽度是⼀样的，但是苹果4s是3.5⼨，苹果5s是4.0⼨，为什么屏幕宽度⼀样尺⼨缺不⼀样⼤呢，这个就去看⼿机尺⼨的定义，原来是⼿机屏幕变⾼了，所以对⾓线长度变长，所以⼿机尺⼨变⼤了。
那么⼿机屏幕宽度怎么知道是多宽多⾼呢？
有⼈说了，我来拿尺⼦量⼀下。。。。
不错，懂得动脑了
可惜不是你想的那样，你拿尺⼦量得到的只是⼿机物理尺⼨，毕竟你得到的单位是毫⽶，我们做⽹页需要的是像素或者点。
下⾯教⼤家⼀个简单的办法来获得⼿机屏幕的宽度：
我们可以写⼀个⽹页，⽹页⾥⽤脚本弹出当前⼿机屏幕的宽度。
<html>
<head>
<title>测试⼿机屏幕宽度</title>
<script>
function showWindowWidth(){
alert(window.innerHeight "，" +window.innerWidth);
}
</script>
</head>
<body onload="showWindowWidth();"></body>
</html>
将页⾯发布⼀下，这样⽤⼿机访问就可以得到⼿机的屏幕宽度和⾼度了。中老年奶粉哪个好
这时候⼜有⼈说了，那我岂不是要很多的⼿机来测试？
好吧，对于你这样的⼩⽩，我只好把我为了测试买的苹果4、苹果5、苹果6、苹果7、苹果8拿出来给你测试了（(^__^) 嘻嘻……，装了个B，我可没买那么多⼿机，恩…我也就买了4啊5s啊7P啊，好了不吹了）
神器上场，⾕歌浏览器。
额，当然不⽌⾕歌浏览器了，现在⼤部分浏览器都⽀持开发者调试模式，按F12就可以打开，其中就有⼿机调试模式，⾥⾯已经为⼤家设定了⼤部分⼿机宽度和⾼度的型号⼿机，你只需要去选择就可以知道各类⼿机的屏幕宽度和⾼度了。
好了上⾯说了⼀⼤堆，不知道你现在知道怎么开发⼿机H5⾃适应⽹页了吗？
不知道，OK，那是因为你还不知道⼿机屏幕分辨率是什么，下⾯继续。
⼿机屏幕分辨率：其实所有⼿机画⾯都是由⼀个点⼀个点组成，这⼀个个⼩点我们称之为像素，像素的单位是px。分辨率分为宽⾼，⽐如电脑的屏幕分辨率1024*768px，1366*768px。还有⼿机的常见分辨率960x640，1136*640px。
这个时候⼤家⼜要问了，我怎么知道我的⼿机是多少分辨率的啊？
噗~~，先让我吐⼝⾎~！
好了，下⾯正式回答⼀下这个问题：
想知道⾃⼰的⼿机，那就⽐较简单，直接在屏幕主页，进⾏屏幕截屏（如果连这个你也不会，那么我也是没辙了，你换我下⾯的⽅案吧），然后进⼊相册，到截屏的图⽚，查看详细，⾥⾯会有尺⼨，这个尺⼨就是你的⼿机分辨率，⽐如我的是最新款的vivo x20全⾯屏⼿机，分辨率就是 1080*2160px（嘿嘿，不⼩⼼⼜装了B，喷我的肯定是买苹果X的）。
那我想其他类型的⼿机是什么分辨率咋办呢？
额，那我也只能说，你去百度吧，想那个哪个。
关键词：xx⼿机分辨率
算了，看在你们已经不厌其烦的读到这⾥，那么我还是奉上我为⼤家百度好的各类⼿机分辨率吧。
⼿机型号⼿机尺⼨屏幕⼤⼩屏幕分辨率后摄像头
iPhone4 3.5英⼨320pt*480pt640px*960px500万像素
iPhone4s 3.5英⼨320pt*480pt640px*960px700万像素
iPhone5 4.0英⼨320pt*568pt640px*1136px800万像素
iPhone5s 4.0英⼨320pt*480pt640px*1136px800万像素
iphone6 4.7英⼨375pt*667pt750px*1334px800万像素
iphone6s 4.7英⼨375pt*667pt750px*1334px1200万像素
iphone6 plus 5.5英⼨417pt*736pt750px*1334px800万像素
iphone6s plus 5.5英⼨417pt*736pt750px*1334px1200万像素
vivo x5 5.0英⼨360pt*640pt720px*1280px1300万像素android320pt*420pt240px*320px
android320pt*480pt320px*480px
android360pt*500pt480px*800px
android320pt*480pt640px*960px
android 360pt*640pt 540px*960px android 360pt*640pt 720px*1280px android
360pt*640pt
1080px*1920px新浪微博会员特权
⼿机型号⼿机尺⼨
屏幕⼤⼩屏幕分辨率后摄像头
综上可以看出来，⽬前主流的⼿机屏幕宽度已经在360pt以上了，最低的也是320pt的。 这个屏幕宽度也就是展⽰我们⽹页时实际提供的像素点数。
也就是我们通常写在meta标签⾥width=device-width这个device-width这个值。好了，以上我们把基本的理论说了⼀下，下⾯我们给出实际项⽬中采⽤的⾃适应⽅法。
三、H5⽹页⾃适应实战
3.1 使⽤zoom 进⾏⽹页缩放
这个⽅法⽐较实⽤，对于刚⼊门写移动端H5⽹页的⼈来说是最容易的⼀种⽅式，因为这种⽅式，你不需要考虑⽤户的⼿机型号，⼿机的分辨率，⼿机的屏幕⼤⼩，你只需要按照UI设计的图原封不动的⽤⽹页写⼀遍即可，下⾯解决些⽤法及原则。
3.1.1 UI 设计⽅法
在进⾏UI设计的时候，我们采⽤⼀种固定的图⽚宽度来设计，⽤主流中的⼀款⼿机做测试即可，通常我们采⽤这种⽅式设计UI时，我们的设计尺⼨宽度定的是640px或者750px，偶尔也有720px的。
3.1.2 ⽹页开发原则
⽹页开发的时候，请按照UI提供的图⽚进⾏编写，⽐如图⽚是640px的，那么⽹页写的时候你就当⼿机屏幕是640px的写，宽度或者⾼度，图⽚上设计的是多少，你就写多少，⽂字⼤⼩是多少，你也写
多少，完全不⽤考虑其他问题，唯⼀要注意的就是你的整个⽹页必须采⽤像素px作为单位。⽐如⽂字⼤⼩font-size: 30px;
3.1.3 缩放⽅法
⽅法就是在你编写的⽹页上加载⼀段缩放脚本，脚本必须在页⾯加载完成时执⾏，下⾯给出jquery版本的写法。
注意：这⾥⾯的数字640，就是你UI设计图⽚的宽度或者说是你⽹页的宽度。 当然光写这⼀个脚本是不够的
我们还需要改⼀下meta标签中对viewport的定义：
好吧，细⼼的你可能也发现了，
我们队width设置了固定值640，没错这个也是UI设计图⽚的宽度。 到此，你已经学会了最简单的⼀种⽹页⾃适应了。 就是这么简单。
3.2 使⽤initial-scale 定义初始化缩放值
这个⽅法和使⽤zoom缩放有着异曲同⼯之处，主要就是对页⾯进⾏缩放，UI设计请直接参考3.1.1，开发请参考3.1.2。
3.2.1 缩放⽅法
有空再写，今天写了3个⼩时了，为⼤家资料还是很不容易的。。。
$(window).bind('resize load', function () {
$("body").css("zoom", $(window).width() / 640); $("body").css("display", "block");
$("body").css("zoom", $(window).width() / 640);});
<meta name ="viewport" content ="width=640, maximum-scale=1.0, user-scalable=no"/>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论