文档章节

移动端切图备忘(别人的)

leona_lily
 leona_lily
发布于 2015/04/07 09:47
字数 1984
阅读 31
收藏 1
点赞 0
评论 0

作为一名刚接触移动端页面的孩子,总会遇到很多问题,如为什么 head 那里要加 viewport meta,为什么背景图片要用 二倍图 等等。我相信也有很多人跟你说,加 viewport 是为了让页面不缩放,让页面在手机上能1:1显示
;用 二倍图 是因为 retina 屏1个像素被分为4个像素,所以模糊了,需要用大一倍的图片,让其显示正常。

或许你哦了一声后也一直这么做,但是你事实上并不明白更细节的原因。我也一直很困惑。因此查阅了不少资料,今天算是懵懵懂懂有点明白。站在巨人的肩膀上记录一下。

为什么要加 viewport meta


先看个例子:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <style>    
*{margin: 0; padding: 0;}     .box1{width: 320px; height: 100px; background: red;}     .box2{width: 980px; height: 100px; background: blue;}     </style></head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>

如果你用iphone(320x640)的手机打开如上页面,你会发现,box1只占据屏幕一部分,box2是满屏的。为什么会这样?为什么 320px 在手机上看到的不是满屏的呢。

其实,由于历史的原因,苹果创造了两个 viewport,分别是 visual viewport 和 layout viewport 。

拿 320x640 的 iphone 作示例:visual viewport 就是屏幕的宽度 320;layout viewport 则是apple创造出来的一个虚拟容器,并规定了其宽度为 980px。相当于在 320px 的视觉容器(visual viewport)中,实际上有一个看不见的有 980px 的布局窗口(layout viewport),例如当我们的页面设置一个 div 的宽度为100%时,这个 div 的实际值为 980px 而不是320px。所以,上面的 320px 宽 box1只占据屏幕一部分,而 980px 宽的 box2 能够满屏。

注:不同浏览器的 layout viewport 设定的数值不一样

  1. Safari iPhone: 980px

  2. Opera: 850px

  3. Android WebKit: 800px

  4. Windows Phone 7: 1024px

但这样同时带来不小的问题,很多专门为 iphone 设计的 320px 页面,都缩小了,这显然不是苹果希望的结果,于是,viewport meta 标签诞生了。

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

width 表示 layout viewport 宽度。initial-scale 表示初始时的缩放比例,user-scalable 表示禁止用户缩放。 这样,上面的 meta 就把 layout viewport 的宽度设置为了跟设备的宽度(visual viewport) 一样大小。从而解决了专门为 iphone 设计的网页在手机上正常浏览。这也是我们为什么现在做手机端页面,都会先加 viewport meta 标签的原因了。

        

为什么要用二倍图

关 于二倍图,现在有太多的文章都解释了,从 CSS pixels,device pixels,PPI 解释到 devicePixelRatio。这里就不把这些概念再说一遍了。但是很多文章在介绍 devicePixelRatio 时,都有条公式devicePixelRatio = 屏幕物理像素/设备独立像素,然后举例说明时,设备的独立像素都只说是 320px,但都没解释为什么是 320px,这里依然是历史原因。

话说当年 iphone 流行的时候,太多太多为 iph
one 量身定制的网站都设置了 viewport:width=device-width,并且按照宽度320px来设计网页,导致了其他浏览器为了兼容性,都 把 layout viewport 设置为了 320px,所以才有 iphone4 的 640/320 = 2,才有了二倍图的由来。但事实上现在分辨率越来越大,不少设备已经到达3倍了,但二倍的图片还算可以接受。所以直到现在都还强调二倍图。


HTML起始模版

<!doctype html><html lang="en"><head> <meta charset="UTF-8">  <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="format-detection" content="telephone=no, email=no" /> </head> <body></body> </html>

这是我每次新建移动端页面时的默认模版,跟PC端的主要区别是多了两行 meta

css reset

html{-webkit-text-size-adjust: 100%; font-size: 62.5%;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input,button, textarea, p, blockquote, th, td, hr {margin: 0; padding: 0; -webkit-box-sizing: border-box;} body{font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif, "Microsoft YaHei"; font-size: 14px; line-height: 1.5; overflow-x: hidden; -webkit-overflow-scrolling: touch;} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display: block;}audio, canvas, progress, video{display: inline-block; vertical-align: baseline;} audio:not([controls]){display: none; height: 0;}[hidden],
 template{display: none;}svg:not(:root){overflow: hidden;} a{background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent;} a:active{outline: 0;}abbr[title]{border-bottom: 1px dotted;} b, strong{font-weight: bold;} dfn{font-style: italic;} mark{background: #ff0; color: #000;} small{font-size: 80%;} sub, sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup{top: -0.5em;} sub{bottom: -0.25em;} img{border: 0;} hr{box-sizing: content-box; height: 0;} pre{overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word;} code, kbd, pre, samp{font-family: monospace, monospace; font-size: 1em;} button, input, optgroup, select, textarea{color: inherit; font: inherit; margin: 0;} button{overflow: visible;} button, select{text-transform: none;} button, html input[type="button"], input[type="reset"], input[type="submit"]{-webkit-appearance: button; cursor: pointer;}button[disabled], html input[disabled]{cursor: default;}input{line-height: normal;}input[type="checkbox"], input[type="radio"]{box-sizing: border-box; padding: 0;}input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{height: auto;}input[type="search"]{-webkit-appearance: textfield; -webkit-box-sizing: border-box; box-sizing: border-box;}input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{-webkit-appearance: none;}fieldset{border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}legend{border: 0; padding: 0;}textarea{overflow: auto; resize: vertical;}optgroup{font-weight: bold;}table{border-collapse: collapse; border-spacing: 0;}td, th{padding: 0;}ul, ol{list-style: none outside none;}h1, h2, h3 {line-height: 2; font-weight: normal;}h1{font-size: 18px;}h2{font-size: 16px;}h3{ font-size: 14px;}input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: #ccc;}

这里基本抄的 normalize,PC与移动端通用。之所以不用 rem 而改为 px,是因为 chrome 对 rem 的渲染还有不足,故暂时不用它,详情可点击:http://note.sdo.com/u/634718107660171185/n/bBXuN~l1zG2a4M2DY000cr


flex 应用

如果说写手机页面最常用的技术是什么,我认为是 flex,为了让内容自适应,等分,水平居中,垂直居中,我们都可以直接使用 flex 解决,事实上,它的表现跟 table 类似。
但 flex 麻烦的一点是需要写点兼容,因为它在成长的过程中,出现了不同的规范定义,造成现在不同系统对其支持的写法不一样,故麻烦了一点,这里当成代码片段总结一下。

1. 等分

.parent{display: -webkit-box; display: -webkit-flex; display: flex;}.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}

2. 水平居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}

3. 垂直居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}
注1:上面 parent 代表父元素,child 代表子元素,水平垂直居中把上面的分别合并起来即可。

注2: 在有了 flex 之后,现在很多弹窗组件的结构也在发生着变化,以前遮罩层都是与弹窗分开的,现在在移动端,完全可以直接嵌套起来,如: div.overlay>div.pop , 然后 overlay 层 position: fixed; top: 0; bottom: 0; left: 0; right: 0; pop 层作水平垂直居中即可


zepto.js

关于 zepto ,事实上,作为一名重构在工作上基本不用接触到,这里把自己之前使用它遇到的坑做下记录。

1. zepto 打包

zepto 默认只加载 zepto、event、ajax、form、ie 模块,故不要妄想一使用zepto就想调用 tap等事件。需加载相应模块编译才可以。 参考 https://github.com/madrobby/zepto 官网的编译说明。

注: 下载下来后在 `make` 文件里找到 `modules = (env['MODULES'] || 'zepto detect event ...').split(' ')` ,添加 `touch` ,参照上面官网说明编译即可。

这里有我基于 zepto 1.1.4 编译好的一份包含 touch 模块的 zepto.js 点击下载

2. 点透修复

点透,就是在元素绑定 tap 事件,进行元素的隐藏或移动位置时,其底下的元素刚好绑定了 click 事件或有web响应的元素时,会触发底下元素的响应,形成 穿透 一样的效果,我们也称之为 点透。
在使用 zepto 的 tap 方法时,就会发生点透现象。

解决方法:

  1. 不要使用 click 事件,用 tap 代替

  2. 使用 fastclick: https://github.com/ftlabs/fastclick

未完待续...参考文章

http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html
http://www.w3cplus.com/mobile/mobile-terminal-refactoring-uniform-and-center.html
http://www.w3cplus.com/mobile/mobile-terminal-refactoring-icons.html
http://www.w3cplus.com/mobile/mobile-terminal-refactoring-scroll.html
http://hax.iteye.com/blog/978184
http://weizhifeng.net/viewports2.html
http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html
http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html


本文转载自:

共有 人打赏支持
leona_lily
粉丝 9
博文 91
码字总数 37848
作品 0
朝阳
程序员
请教资历长点的前端给点意见。关于前端学历路线

本人去年年底刚入行前端,之前去日本打工了三年,回来去培训机构学了点设计,自学了切图,做了一年制作。后来自学了php,期间还参加了前端培训班。 现在 jquery没问题,页面切图搞兼容没问题,...

奥巴码侬 ⋅ 2014/05/11 ⋅ 9

移动端前端开发与PC端比有哪些不同?

1,移动端在布局跟js效果方面,与PC端有什么不同 先说布局方面: PC端咱们最常用的就是固定宽度980px(也有960,1000,1200),然后水平居中 width:980px;margin:0 auto; 但移动端就不能这么用...

名字已被取 ⋅ 2016/04/12 ⋅ 0

SLICY 移动切图框架--Mslicy

Mslicy是切图网推出的 SLICY移动切图框架 。这是继 SLICY PC响应式框架后 一款专门针对 WEBAPP移动网站的 一款简约、优雅的HTML5/CSS3框架。 优势 SLICY移动切图框架 ,可以让你像布局PC网站...

qietuwang ⋅ 2016/07/14 ⋅ 0

lua 与 nginx cache 交互

最近在做分布式图片存储系统2.0,在1.0的基础上可以进行动态切图(产品升级会遇到不同尺寸包括pc和移动端),比如http://i1.xxx.com/1.jpg!c1:1+w230.jpg 是在1.jpg的基础上先按照1:1 切图然...

idreamblue ⋅ 2013/12/03 ⋅ 1

小白最关心的8个UI问题

近几年来,UI设计绝对是设计行业中的瞩目之星,无论在PC端、移动端还是游戏上都是大放异彩。越来越多的年轻人选择UI设计这个行业,然而刚踏入这行的设计新人对未来还是很迷茫。下面总结了新人...

jongde ⋅ 2016/10/24 ⋅ 0

微博爬虫(移动端)

全文简介 本文是用Python爬取微博移动端的数据。可以看一下Robots协议。另外尽量不要爬取太快。如果你毫无节制的去爬取别人数据,别人网站当然会反爬越来越严厉。所以,不要难为别人,到最后...

挖掘机小王子 ⋅ 2017/12/24 ⋅ 0

html前端开发!专业切图哦!

长期接受各种外包的页面切图,可以独立完成各类小游戏,也可以做整套的网站 可以跨平台,兼容PC和移动端,兼容各大浏览器 联系qq:492917235,692474187 联系手机:15867187931,18917302776 联...

orshen ⋅ 2014/09/22 ⋅ 1

HTML-CSS

一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺...

掘金官方 ⋅ 01/04 ⋅ 0

给IOS初学者及新手的建议

给ios初学者的建议 不管你是培训的还是在上学的或者是自学的!你选择了这条路就要认真的对待你所学的,别出来找工作什么都不会! 首先, 第一点:把你的obj-c语言基础打好,在学习obj-c之前最...

长平狐 ⋅ 2013/12/25 ⋅ 0

从别人网站抓取一张图片保存本地和数据库 【求思路】

右上角有今天是周几的显示 右下角只有一个 上一幅图的触发图标 1: 今日图片 右上角给出当天是星期几 2:图中间是无压缩的原图 3:鼠标移动图上,触发title文字说明 4:右下角 上一张图AJAX传...

本周网 ⋅ 2014/09/15 ⋅ 5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 40分钟前 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部