文章目錄

• 一、移動(dòng)端瀏覽器
• 二、移動(dòng)端屏幕分辨率
• 三、移動(dòng)端網(wǎng)頁調(diào)試方法

一、移動(dòng)端瀏覽器

---

移動(dòng)端瀏覽器 比 PC 端瀏覽器發(fā)展要晚 , 使用的技術(shù)比較新 , 對(duì) HTML5 + CSS3 支持較好 , 常見的瀏覽器如下 :

• UC / QQ / Opera / Chrom / 360 / 百度 / 搜狗 / 獵豹

國(guó)內(nèi)的瀏覽器 基本都是 根據(jù) Webkit 內(nèi)核進(jìn)行修改而來的 , 目前沒有自主研發(fā)的內(nèi)核 , 因此 移動(dòng)端開發(fā)適配比較簡(jiǎn)單 , 兼容主流的瀏覽器 , 即兼容 Webkit 內(nèi)核瀏覽器即可 ;

二、移動(dòng)端屏幕分辨率

---

移動(dòng)設(shè)備的尺寸類型非常多 , Android / iOS 手機(jī)分辨率種類很多 , 參考

• Android 屏幕適配 專欄 ;
• 【Android 屏幕適配】屏幕適配基礎(chǔ)概念 ① ( Android 與 iOS 屏幕寬高比種類 | 屏幕像素密度 DPI ) 博客 ;

前端開發(fā)時(shí) , 不需要關(guān)注上述 屏幕像素密度 dpi , 密度無關(guān)像素 dp , 只需要關(guān)注 像素尺寸 px 即可 ;

三、移動(dòng)端網(wǎng)頁調(diào)試方法

---

使用 Chrom DevTools 谷歌瀏覽器開發(fā)工具 模擬手機(jī)調(diào)試 ; 使用 360 極速瀏覽器也可以使用該開發(fā)工具 ;

進(jìn)入瀏覽器 , 輸入網(wǎng)址 , 按下 F12 進(jìn)入調(diào)試模式 , 點(diǎn)擊工具中的 按鈕 , 可以 切換到手機(jī)模式 ;

切換成手機(jī)模式 , 樣式如下 :

左側(cè)的下拉菜單 , 可以選擇手機(jī)型號(hào) ;

如果沒有找到滿意的手機(jī)型號(hào) , 可以點(diǎn)擊 Edit 按鈕 , 添加虛擬設(shè)備 ;

最右側(cè)的 按鈕 , 可以旋轉(zhuǎn)手機(jī)的橫豎屏 , 下面是橫屏樣式 :

總結(jié)

以上是生活随笔為你收集整理的【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。