再谈移动端Web屏幕适配
一个多月前水了一篇移动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。
对于要使用哪种方案,还是要落实到自己的项目中。
完。睡觉去。。。
转载于:https://www.cnblogs.com/zjzhome/p/4912868.html
再谈移动端Web屏幕适配相关推荐
- 移动端Web页面适配方案(整理版)
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需 ...
- 实现移动端不同屏幕适配
静态页面,学习目标是实现移动端不同屏幕适配 html <!DOCTYPE html> <html lang="en"><head><met ...
- 移动端app屏幕适配
我们在开发移动端项目时经常会遇到屏幕适配问题,一般有两种适配方式: 方式1:vw vh适配 100vw为100%屏宽,100vh为100%高 一般这种方式会有些弊端,所以不太推荐 方式2:rem适配 ...
- (转)webapp兼容移动端的屏幕适配
亲测可用!!!! 屏幕适配终极方案 <meta name="viewport" content="width=你的基准像素, user-scalable=no&qu ...
- 移动端web自适应适配布局解决方案
100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1. ...
- Android也谈android和多屏幕适配
android界面的布局十分简单,简单到不懂编程的人,也能借用android的布局面板快速设计出需要的用户界面.android的界面布局又十分复杂,既使是工任经验十分丰富的老鸟,也不敢保证他的布局在所 ...
- android 默认dimens_Android开发——自动生成Android屏幕适配的dimens.xml文件
使用dimens.xml解决屏幕适配问题是Android官方解决方案,本文主要讲述了如何自动生成Android屏幕适配的dimens.xml,减少了工作量,在维护dimens.xml文件时更加省时省力 ...
- Android不同屏幕适配的大神解决方案(转)
在CSDN社区逛了这么多年,从中也学习了很多,但是一直没有时间自己写博客(其实是因为太菜,滑稽),这也是我第一次转载大神的文章,不是很会弄,所以里面的内容和链接全是用的原作者的,也没有经过精简和编辑, ...
- 今日头条屏幕适配方案终极版正式发布!
原文地址: juejin.im/post/5bce68- 以下是 骚年你的屏幕适配方式该升级了! 系列文章,欢迎转发以及分享: 骚年你的屏幕适配方式该升级了!(一)-今日头条适配方案 骚年你的屏幕适配 ...
最新文章
- spring各版本jar包和源码
- 阿里平头哥首款CPU芯片发布!5nm倚天710,128核单片600亿晶体管,无人能与争锋...
- 字符集编码详解【ASCII 、GB2312、GBK、GB18030、unicode、UTF-8】(转)
- git提交代码报错解决方法 Git-remote Incorrect username or password ( access token )
- servlet中文乱码_Servlet入门 信息过滤
- Linux内存管理:ARM64体系结构与编程之cache(2):cache一致性
- matlab迭代算法实例_【优化求解】基于NSGA2的求解多目标柔性车间调度算法
- 未来计算机多媒体化,计算机多媒体技术的发展趋势研究
- 洛谷 P1069 细胞分裂
- Empathy Map:让团队移情到用户的奥秘
- 个人信贷评估模型研究
- Django详细教程(图文)
- uniapp踩坑(五):监听手机物理返回键和滑动返回事件
- 2016 iherb 图文海淘攻略
- Linux下多个进程可以同时打开同一个文件吗?文件描述符与打开文件的关系?
- dwz ajax分页,DWZ table的原生分页浅谈
- 【赛后诸葛】2020 力扣杯!Code Your Future 春季全国编程大赛
- c语言实验--正弦,C语言实验——正弦
- win7卡在正在启动windows界面_一键还原怎么用董哥教你win7一键还原怎么用
- 无法验证证书 java_求助大神“无法验证证书 将不执行该应用程序”我该怎么办?...