一个多月前水了一篇移动web屏幕适配方案,当时噼里啪啦的写了一通,自我感觉甚是良好。不过最近又有一些新的想法,和之前的有一些不同。

先说一下淘宝的方案,感觉现在好多的适配方案都是受了它的影响,上周六看了winter在一个会议的分享,讲到了这个方案。现在你谷歌一下移动web适配,绝对可以看到很多类似的,切活动页的童鞋都忍不住试一把。这些方案和我的博客写的其实还是相似的,就是抛弃了那种viewport直接缩放,然后给定html的初始font-size值,使用rem这个单位。

在屏幕的设备像素比上,也只是判断了IOS设备的,Android的设备统一以1倍屏幕来处理:

虽然Android机型中也有很多高清甚至超高清屏幕,但是碎片化也严重,这样处理其实是降低了适配成本:

上图来自http://www.quirksmode.org/,对于rem这个单位给出的是beware。

这个方案,写起来挺爽,但如果自身能力不足或者团队没有有力的支撑,效果不会很好,比如字体是不是要用rem,用了rem产生很多小数点浏览器的解析各异,或者不用rem,对于每种屏幕应该设置多大的字体,一些间距什么的会导致有那么1px的误差,视觉妹妹分分钟看透;对于Android的某些机型甚至是2.x的适配。这种方案一般人看来,就是“嗯,看起来是这样,好像用起来不错的样子”这种感觉,不一定能hold住。之前自己的方案现在看来依然有巨多的问题。

然后是media query,想必我们最早对响应式的概念就是他了,个人感觉如果需要做到PC移动端都能有好的表现效果,这种方式是最好的,如果项目只是针对移动端,就有些力不从心。还不如JS计算来的爽快。

然后是这个:

<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no" />

将宽度设置为640px,和设计稿一样的尺寸,让浏览器自己去缩放以适应屏幕,这样你就直接按照视觉稿切就行了,特别适合推广页活动页神马的。而且border 1px的问题也是妥妥的解决了,这看起来有点像第一种方案的动态设置viewport缩放。不过有些手机字体会有一些模糊,不过应该在容忍范围内。

最后呢是经典的320px:

<meta name="viewport" content="width=320,initial-scale=1,user-scalable=no" />

或者

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

视觉给的640px的图,除以2,也就是移动web屏幕适配方案这里一开头提到的前辈的方案,确实足够简单而且基本没有什么问题,唯一的问题就是高清屏幕上字也是那么小,但是好像也不会有什么太大的问题。或许你也在别的地方看到initial-scale设置为1.3的介绍,也就是viewport缩放了。而且如果你的项目要支持到android2.x的坑爹系统,或许这个方案是最好的,经测试,rem表现坑爹。

又说了这么多废话,其实想说的是,各种方案其实都有viewport缩放的影子,而淘宝的方案是一个集大成的产品,对几乎每一种屏幕做了适应,对字体图片都做了处理。winter在分享中说道(大概意思):其实大家一直都在320,做的也不错,而且很舒适,但是我们想打破这种舒适,引导大家去使用rem。

对于要使用哪种方案,还是要落实到自己的项目中。

完。睡觉去。。。

再谈移动端Web屏幕适配的更多相关文章

  1. 移动web屏幕适配方案

    刚进部门就被拉去趟移动端Web的浑水,视觉稿是按照640px设计的.那如何做屏幕适配呢?当然想到的第一方法就是问前辈了,问他们之前怎么做的,前辈说直接按视觉稿来,我说640太大了,他说除以2啊,按32 ...

  2. 移动端 移动web屏幕适配方案 随不同宽度的屏幕而改变

    链接地址1:http://www.cnblogs.com/zjzhome/p/4802157.html 链接地址2:http://www.html-js.com/article/Mobile-term ...

  3. 移动端web自适应适配布局解决方案

    100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1. ...

  4. 【js】再谈移动端的模态框实现

    移动端模态框的机制因为与PC的模态框机制一直有所区别,一直是许多新人很容易踩坑的地方,最近笔者作为一条老咸鱼也踩进了一个新坑中,真是平日里代码读得太粗略,故而写上几笔,以儆效尤. 故事的起因是这样的, ...

  5. 移动端Web页面适配方案

    概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度  windw.innerWidth/Height layout viewport 布局视口,DOM宽度 doc ...

  6. Unity打包PC端各种屏幕适配,无边框,最小化,显示可拖拽部分

    using UnityEngine; using System.Collections; using UnityEngine.EventSystems; //using UnityEngine.Sce ...

  7. Android开发——自动生成Android屏幕适配的dimens.xml文件

    使用dimens.xml解决屏幕适配问题是Android官方解决方案,本文主要讲述了如何自动生成Android屏幕适配的dimens.xml,减少了工作量,在维护dimens.xml文件时更加省时省力 ...

  8. Web 端屏幕适配方案

    基础知识 像素相关 1.像素 :像素是屏幕显示最小的单位. 2.设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. ...

  9. 移动 web 端屏幕适配 - rem

    前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...

随机推荐

  1. Parse--Saving Images(翻译)

    原文地址:https://www.parse.com/tutorials/saving-images 学习如何创建一个关于允许用户拍照和上传到parse.com的APP 源码地址:https://gi ...

  2. TIDB ---NEW SQL

    https://github.com/pingcap/tidb http://www.pingcap.com/ Quick Start Run TiDB with Docker You can qui ...

  3. IPC——共享内存

    Linux进程间通信——使用共享内存 下面将讲解进程间通信的另一种方式,使用共享内存.   一.什么是共享内存 顾名思义,共享内存就是允许两个不相关的进程访问同一个逻辑内存.共享内存是在两个正在运行的 ...

  4. 异常处理之namespace找不到

    最近在做控件的时候遇到了这么一个异常 就是说类库中明明就有命名空间,但是在winForm中引用的时候也能正常显示, 可是编译的时候却报 找不到指定的命名空间 这样的异常,头痛了好久,结果看到了winF ...

  5. Docker 选项和命令

    选项 -D=true|false 使用 debug 模式.默认为 false. -H, --host=[unix:///var/run/docker.sock]: tcp://[host:port]来 ...

  6. SQL操作XML

    前面一段时间为了赶项目的进度,一直在加班,现在空闲了下来将前面碰到的问题整理了一下,发现了一些十分有用的,在此记录下来,看能不能帮助到遇到同样问题的朋友,此文仅是自己个人的意见,若存在问题,还望不宁赐 ...

  7. 使用sharepreferce记录数组数据

    使用sharepreferce记录数组数据 /** * * sharepreference纪录news数据 * * */ private static final String name=" ...

  8. 2dx关于js响应layer触摸消息的bug

    cocos2dx关于js响应layer触摸消息的bug cocos2d-x 3.7 问题描述: 目前这个版本中(3.7),c++层的layer触摸消息只能通过消息的方式发送给js,不能像lua一样直接 ...

  9. Java学习笔记——Java工厂模式之简单工厂

    package com.app; import java.util.Date; /* * 工厂模式:简单工厂.工厂方法.抽象工厂 * * */ public class Test0718_Factor ...

  10. Oracle基础 exp/imp命令

    一.导出方式: 使用exp/imp方式导出数据分为四种方式: 1.表方式导出:一个或多个指定的表,包括表的定义.表数据.表的所有者授权.表索引.表约束,以及创建在该表上的触发器.也可以只导出结构,不导 ...