移動端切圖備忘

本文轉載自查看原文 2014-10-08 16:44 7818 CSS

作為一名剛接觸移動端頁面的孩子，總會遇到很多問題，如為什么 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 設定的數值不一樣

Safari iPhone: 980px
Opera: 850px
Android WebKit: 800px
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 方法時，就會發生點透現象。

解決方法：

不要使用 click 事件，用 tap 代替
使用 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 移動端rem切圖移動端輪播圖實例 Swiper 移動端全屏輪播圖效果移動端輪播圖（原生JS寫法） ios移動端切圖及前端規范原生JS實現移動端輪播圖移動端背景圖自適應 ios移動端切圖及前端規范移動端2倍圖和3倍圖的處理方法移動端二倍圖和三倍圖的處理方法