您的位置：首页 > Web前端 > HTML5

H5网页开发新手入门-H5网页如何适应不同手机屏幕分辨率？

2017-11-19 16:33 776 查看

一、问题汇总

手机网页怎么制作？

怎么让网页适应不同手机屏幕？

H5网页设计到底该设计多大尺寸？

rem怎么自适应布局？

H5一屛页面如何自适应屏幕？

viewport该怎么写？

width=device-width如何自适应不同手机屏幕的？

css3的rem单位怎么使用？

如何通过media媒体查询实现网页自适应屏幕？

怎么使用100%百分比做自适应布局？

如何使用js改变zoom缩放网页自适应手机屏幕？

如何使用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手机分辨率

算了，看在你们已经不厌其烦的读到这里，那么我还是奉上我为大家百度好的各类手机分辨率吧。

手机型号手机尺寸屏幕大小屏幕分辨率后摄像头
iPhone43.5英寸320pt*480pt640px*960px500万像素
iPhone4s3.5英寸320pt*480pt640px*960px700万像素
iPhone54.0英寸320pt*568pt640px*1136px800万像素
iPhone5s4.0英寸320pt*480pt640px*1136px800万像素
iphone64.7英寸375pt*667pt750px*1334px800万像素
iphone6s4.7英寸375pt*667pt750px*1334px1200万像素
iphone6 plus5.5英寸417pt*736pt750px*1334px800万像素
iphone6s plus5.5英寸417pt*736pt750px*1334px1200万像素
vivo x55.0英寸360pt*640pt720px*1280px1300万像素
android320pt*420pt240px*320px
android320pt*480pt320px*480px
android360pt*500pt480px*800px
android320pt*480pt640px*960px
android360pt*640pt540px*960px
android360pt*640pt720px*1280px
android360pt*640pt1080px*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版本的写法。

$(window).bind('resize load', function() {
$("body").css("zoom", $(window).width() / 640);
$("body").css("display", "block");
$("body").css("zoom", $(window).width() / 640);
});


注意:这里面的数字640，就是你UI设计图片的宽度或者说是你网页的宽度。

当然光写这一个脚本是不够的

我们还需要改一下meta标签中对viewport的定义：

<meta name="viewport" content="width=640, maximum-scale=1.0, user-scalable=no"/>


好吧，细心的你可能也发现了，

我们队width设置了固定值640，没错这个也是UI设计图片的宽度。

到此，你已经学会了最简单的一种网页自适应了。

就是这么简单。

3.2 使用initial-scale定义初始化缩放值

这个方法和使用zoom缩放有着异曲同工之处，主要就是对页面进行缩放，UI设计请直接参考3.1.1，开发请参考3.1.2。

3.2.1 缩放方法

有空再写，今天写了3个小时了，为大家找资料还是很不容易的。。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  h5开发 自适应手机
相关文章推荐
新的分享
章节导航