十个Tips设计出合乎人性的手机版网页（上）

近日全球知名数据分析公司 Newzoo 发布了2019年的全球移动市场行业预测报告。报告指出2018年全球智能手机用户超过33亿人，随着移动终端硬件的不断发展，智能手机功能变得更强大，人们在移动端可以得到的体验会更好，也更方便。Newzoo 预计到2021年，用户数量将达到38亿，其中亚太地区占了这个数字的一半以上。面对这样的发展形势，没有人甘愿放弃拥有这么庞大客户群体的渠道。所以一个优秀的网页设计，必须具有移动兼容性。

中国互联网协会数据统计：用户如果在访问移动端网站时体验不好，3秒内跳出的网站比例大概在61%，5秒内跳出网站的比例大概在85%，而这些跳出的用户中有40%会访问竞争对手的网站，这不仅是公司的损失也是间接帮助自己的竞争对手，所以有必要进行良好的网站设计。

今天，我们就邀请了我们的网页工程师给大家介绍一下小技巧， 首先大家要明白浏览器对网页的预设设定，因为如果要设计一个好网页，首先一定要知道预设设定，手机浏览器跟电脑浏览器的预设设定是完全不一致的

十个Tips设计出合乎人性的手机版网页一、系统预设

系统预设，使用了980PX大小宽度的viewport

十个Tips设计出合乎人性的手机版网页二、可以缩放的浏览器

首先要讲解设计移动web，为什么不使用默认的980px的布局viewport？

因为不同手机, 有不同的DPI, 不同的解析度, 那么，如果要同时要显示一个1000px的网页, 浏览器要怎么处理?

开发智能手机, 最大的问题就是没有标准, 跟电脑不同, 电脑屏幕一直都只有几个常用的尺寸，很少有例外。

手机会先模拟一个980的页面，再将你的网页缩放至合适比例大小

十个Tips设计出合乎人性的手机版网页三、 为什么要有viewport？

一个300多像素的屏幕，放一个1000多像素的页面，会混乱，所以要先虚拟一个980像素的页面，然后进行缩放。

度量|视口 visual viewport ==== 窗口缩放scale

布局 layout viewport

十个Tips设计出合乎人性的手机版网页四、 设计移动web为什么不使用默认的980px的布局viewport？

1、宽度不可控制，不同系统的设备默认值都可能不同

2、页面缩小版显示，交互不友好

3、 链接不可点

4、 有缩放，缩放后又有滚动

font-size为40px等于pc上12px同等物理大小。

由篇幅限制，今天先给大家介绍到这里，下期我们将继续为您介绍相关的后续内容，敬请关注郑州网页设计公司官网http://www.zzwish.com。