近日全球知名数据分析公司 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。