页面适配不同设备的解决方案

pc端和移动端分别设计开发

缺点:

  • 维护成本较大;

pc和手机端用两套html、css、js文件,修改优化要分开做

  • url跳转;

因为pc移动不是一个地址

优点:

  • 交互上更容易接近native app

适合:

  • 大型的网站,pc和移动版可能内容却别比较大;
  • 对移动平台的交互要求高

响应式设计

缺点:

  • 代码冗余。移动pc的代码在一起,各平台都会加载;
  • 前端开发成本并不低,需要考虑的比较多,比如响应式布局、图片等;
  • 手机端体验不能达到最优;
  • 对设计的要求也比较高;

优点:

  • 维护成本相对低(只需要维护一套css);
  • 不需要服务器端多余的支持;
  • 不同设备上用户体验比较一致;

适合:

  • 轻量的页面,结构内容简单容易做响应式;
  • 偏重信息传达而轻交互的页面

(常见于企业网站、博客等)

响应式

断点
320px 640px 980px 1200px...
可能要考虑各平台常用分辨率,产品设计,设计方面需要出的效果图
媒体查询

@media only screen and (max-width: 1200px) {}
@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 600px) {}
@media only screen and (max-width: 480px) {}

响应式图片

  • img srcset
<img src="path-to-default-image.jpg" alt=""
srcset="path-to-default-image.jpg 600w 200h 1x,
path-to-another-image.jpg 600w 200h 2x,
path-to-a-third-image.jpg 200w 200h">
  • media query background
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px) {
img { background-image: url(emperor-penguins-2048.jpg); }
}
  • background-size

ie9+

布局

  • fluid layout

用百分比单位布局

  • flex

ie10+,做纯移动的倒是比较适合……

js判断设备

var ua = navigator.userAgent;
isAndroid = /Android/i.test(ua);
isBlackBerry = /BlackBerry/i.test(ua);
isWindowPhone = /IEMobile/i.test(ua);
isIOS = /iPhone|iPad|iPod/i.test(ua);
isMobile = isAndroid || isBlackBerry || isWindowPhone || isIOS;
// isMobile = /Mobile/i.test(ua);
alert(isMobile);

可以考虑使用模块化按需加载,尽可能减少代码加载量

触屏交互
需要用一些支持touch的插件比如图片轮播
尽可能大的点击范围

Comments
Write a Comment