移动端网页设计经验与心得

时间 2019-11-12

标签移动网页设计经验心得栏目无线繁體版

原文原文链接

智能手机发展确实很迅速，像今年，个人大部分工做就都在移动端网页上。css

再往前些年，看到的手机版/移动版网页，限制于浏览器与手机性能，2g网络速度等html

网页设计无非是蓝、黑、白，界面单调，而且要尽量的设计简单。html5

如今状况就大不相同了，软件上webkit内核浏览器大行其道，硬件日新月异，网速来讲，4g正炒得火热。jquery

下面就和你们分享一下个人一些移动端网页设计经验与心得。css3

⒈ 分辨率
这应该是移动端网页最关心的问题了，由于移动设备五花八门，各类分辨率都有。要想在这些设备上都能有良好的浏览体验，得花一番功夫。web

使用viewport：这已是移动端网页的必备了，它能够设定页面的宽度，是否容许缩放等等。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
```
通常设置width=device-width，就是设置为设备的屏幕宽度，固然也能够是具体数值ajax
百分比与max(min)-width使用：移动端网页不只分辨率不一，并且随时能够横竖屏切换，因此百分比宽度设定很是必要，再配合max(min)-width限制最大(小)宽度，能有效的适应各类分辨率，若为此还有特别需求，可看下一条，"使用Media Queries"浏览器
使用Media Queries，这也是响应式web设计的一部分缓存

<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 640px)">

这里的意思就是在大于640px的屏幕宽度下，使用style1样式，也能够写在样式内部，如：网络

@media screen and (min-width: 640px){
        .d1{background:#ccc;}
        }

⒉ 内容与缓存
虽才说到如今4g正炒得火热，但不能否认移动设备网络环境上的局限性，因此仍是有必要对此作一些处理。

使用manifest缓存
```
<html manifest="/mobile.manifest">
```
在html上添加manifest，其中文件格式内容如：
```
CACHE MANIFEST
##须要离线的内容
CACHE:

Script/jquery.js
Script/gameconfig.js


Image/home.png
Image/logo.png

##老是访问网络的内容
NETWORK:
*
##访问A失败时访问B
FALLBACK
           
```
浏览器将缓存chache内全部的内容，而且能够离线访问，只要文件发生任何改变都将会从新读取并刷新所有缓存，因此更改注释是个更新缓存的好方法

这里要注意的是
1，添加了manifest的当前网页也会被缓存 因此推荐的方式是页面缓存，页面动态内容所有用ajax获取，因此在移动网站项目设计开始就要注意这个问题
2，页面中添加iframe 而后子页面引用manifest想达到缓存资源而不缓存当前页面内容，是无效的。

尽量使用css样式来代替图片，因为移动端浏览器对css3的支持，使得之前不少图片能够用样式来代替
如咱们公司项目内用到的一些，下图：

按钮用到了渐变+圆角+内阴影

.btn_red {
display: block;
line-height: 28px;
padding: 1px 0;
border: 1px solid #B81414;
border-radius: 2px;
background: #FF5A5A;
background: -webkit-gradient(linear, 0 0, 0 70%, from(#FF5A5A), to(#FF4444));
overflow: hidden;
margin-top: 3px;
color: #fff;
box-shadow: 0px 1px 1px #FFB5B5 inset;
}

三角形就是用border的颜色，改变颜色能够画出指向不一样方向的三角形

.tip_t{
border-color: transparent transparent #bb0808 transparent;
border-style: solid;
border-width: 10px;
width: 0px;
height: 0px;
}

箭头是两个三角形叠在一块儿
……
用样式代替图片以后不只大小减小了不少，可维护性更大大提升

页面只展现部份内容，多提示用户"点击展开"或者"查看更多"，再异步获取内容，你们都不但愿打开一个网站，流量就哗哗没了

⒊ 布局
手机端可视区域小，布局上不一样于传统网页，须要充分利用有限的空间去展现信息。

页面流程简单清晰，复杂的操做尽可能分段展现，以下图：
隐藏不经常使用的功能，能够将其放在侧边栏或弹出层，以下图：
因为移动端是直接用手指操做，而非鼠标。因此，须要响应元素点击区域要相对明显，大
屏幕宽度虽小，可是上下滑动体验好，所以布局上能够多上下排列

⒋ 其余与结语

许多小厂商的手机平板，还有一些rom上的系统默认浏览器版本各异(很头疼..)，因此测试工做要作足
html5中<input /> type有好几种新类型，好比<input type="tel" />，移动端上点击会默认弹出数字键盘，可多试试
本文只是总结了我项目上一些当心得，若有纰漏和错误谢谢你们指正，也欢迎你们点赞和讨论