移動端基礎概念

需要注意的是，css畫素與物理畫素的關係是靠瀏覽器廠商在維護，並不是裝置廠商

css畫素是瀏覽器中特有的概念

移動端瀏覽器通常寬度是 240px~640px，而大多數為 pc 端設計的**寬度至少為 800px，如果仍以瀏覽器視窗作為視口的話，**內容在手機上看起來會非常窄。因此，引入了布局視口、視覺視口和理想視口三個概念，使得移動端中的視口與瀏覽器寬度不再相關聯。

移動端在初始化時，視覺視口會將整個布局視口完整顯示出來，所以移動端瀏覽器在初始化的時候，物理畫素與css畫素之間的比例不可能是一比一，這個比例與裝置解析度和布局是口的大小有關

視覺視口

理想視口

initial-scale

user-scalable [no|yes]

：是否允許縮放，預設允許（ios10不支援該屬性）

minimum-scale：允許縮放的最小比例

maximum-scale：允許縮放的最大比例

target-densitydpi

rem與em的區別

rem示例

(function

() )()

獲取理想視口的寬度

示例

(function

() )()

，原因在於dom1的繫結方式在chrome早期版本（56及以下）無法觸發，這就給除錯帶來了困難

建議採用dom2的方式繫結touchstart、touchmove以及touchend事件： addeventlistener()

示例

//

下面這行**可以禁止手機瀏覽器所有的預設事件 
document.addeventlistener("touchstart", function
(ev))

示例

doctype html

//rem適配方案!(
function
(flag) 
" })(16)
} script
>
body
>
html
>

//rem適配方案!(

function

(flag)

" })(16)

var=

document.queryselector(''

)

'click',

function

() )

//全面禁止事件預設行為會導致手機端a標籤無法跳轉

//移動端a標籤跳轉方案，解決誤觸

varanodes

=document.queryselectorall("a

")for(

vari =0

; i

<

anodes.length; i

++) )

anodes[i].addeventlistener(

'touchmove',

function

() )

anodes[i].addeventlistener(

'touchend',

function

() })

}}

script

>

body

>

html

>

touchevent.changedtouches

touchevent.targettouches

touchevent.touches

a

裝置**商

軟體製造商（作業系統）

服務提供商

內建瀏覽器

安卓ios --- safari

黑莓 --- 黑莓webkit

window phone --- ie

webview

**瀏覽器(較少)

混合瀏覽器

**瀏覽器工作流程

移動端適配概念

在千峰逆戰班學習的第二十七天 一步乙個腳印，越努力越輕鬆，越堅強越幸運！繼續加油，奧利給！移動裝置螢幕尺寸不一樣，不同型號的手機會有不同大小的螢幕，不同型號的平板也是，就算是我們的pc端也是會有不同大小的螢幕 適配用來做布局的，移動端比較麻煩 裝置太多，尺寸也不一樣 而且設計師設計的尺寸 和我們切圖...

移動端基礎

1.視口 視口就是瀏覽器顯示頁面內容的螢幕區域 視口分為布局視口 視覺視口 理想視口 移動端布局想要的是理想視口就是手機螢幕有多寬，我們的布局視口就 有多寬 通過給移動端頁面增加meta視口標籤 2.meta視口標籤 viewport 視口標籤 content width device width ...

移動端基礎

移動端瀏覽器我們主要針對webkit核心進行相容 現在移動端碎片化比較嚴重，解析度和螢幕尺寸大小不一 1 移動端除錯方法 視口 viewport 就是瀏覽器顯示頁面內容的螢幕區域。視口可分為布局視口 視覺視口和理想視口 2.1布局視口 layout viewport 標準寫法 屬性解釋說明 widt...