移動web開發基礎知識

標籤：style   blog   http   io   color   ar   os   使用   sp   

　　首先做開發碼子編完了我們得有個工具去看效果，PC端開發我們有firefox,chrome等等，那麼我們做手機web用什麼做調試？手機裝置多種多樣，不同品牌，不同的螢幕尺寸。當然我們不可能把所有的手機裝置都買齊了，然後在開發的時候，在桌子上從左至右依次擺放，在寫了一段代碼之後，從左至右依次重新整理，呵呵。如果真有人這麼去做，我也不說啥了，我只求跪求土豪咱做朋友吧~嘿嘿。

廢話說了一推，說回重點：首先，移動web開發咱需要一個調試工具。

1.Google emulation：Google的移動端模擬器，簡單的理解為pc類比手機的螢幕大小和瀏覽器特性的一個東東。

開啟檔案：開啟chrome瀏覽器，然後F12鍵開啟，開發人員工具，點擊小手機的表徵圖，如

 

開啟的效果和各部分的功能作用：

 

首先我們在device裡可以選擇需要類比的裝置，這個很重要，決定我們寫的頁面可以適配什麼樣的手機

開啟device下拉式功能表看到可以類比的裝置：可以看到主流的手機這裡基本都有了O(∩_∩)O

有了emulation我們可以很方便的做開發了。

2.veiwport: 什麼是veiwport?

官方解釋：手機瀏覽器是把頁面放在一個虛擬“視窗”（viewport）中，通常這個虛擬“視窗”（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器最佳化的網頁的布局），使用者可以通過平移和縮放來看網頁的不同部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發人員來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支援。

簡單的理解為，移動終端的可視區。

關於veiwport的有關設定：

常見的例子：<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0 /> 

上邊例子的中文解釋  寬度等於輸出裝置的寬度，高度等於輸出裝置的高度  使用者不準許縮放 初始放大比例為1.0（也就是1:1大小），最小縮放1.0，最大放大1.0，總之一句話就是不讓使用者做縮放的操作。

width [pixel_value | device-width] width 直接去設定具體數值大部分的安卓手機不支援的 但是IOS支援
user-scalable 是否允許縮放 （no||yes）
initial-scale 初始比例
minimum-scale 允許縮放的最小比例
maximum-scale 允許縮放的最大比例
target-densitydpi
-- dpi_value 70–400 //每英吋像素點的個數
-- device-dpi 裝置預設像素密度
-- high-dpi 高像素密度
-- medium-dpi 中等像素密度
-- low-dpi 低像素密度
-- webkit核心已不準備再支援

3媒體查詢:Media Queries

關於媒體查詢的用法詳情請參考：http://www.w3cplus.com/content/css3-media-queries

主要作用就是適配不同裝置的大小。

例如：

 

@media all and (min-width: 400px)

媒體類型所有媒體，螢幕寬度400px以上執行某某樣式

@media all and (max-width: 399px)

媒體類型所有媒體，螢幕寬度399px以下上執行某某樣式

@media screen and (min-width:600px) and (max-width:900px)

媒體類型螢幕 ，當螢幕尺寸大於600小於900px時執行的某某樣式

實際工作中引用link標籤時候使用：

<link rel="stylesheet" media="all and (max-width:600px)" href="small.css" type="text/css" /><link rel="stylesheet" media="all and (min-width:900px)" href="big.css" type="text/css"  /><link rel="stylesheet" media="all and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

 

移動web開發基礎知識