文章目錄

• 一、移動端瀏覽器
• 二、移動端屏幕分辨率
• 三、移動端網頁調試方法

一、移動端瀏覽器

---

移動端瀏覽器 比 PC 端瀏覽器發展要晚 , 使用的技術比較新 , 對 HTML5 + CSS3 支持較好 , 常見的瀏覽器如下 :

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

國內的瀏覽器 基本都是 根據 Webkit 內核進行修改而來的 , 目前沒有自主研發的內核 , 因此 移動端開發適配比較簡單 , 兼容主流的瀏覽器 , 即兼容 Webkit 內核瀏覽器即可 ;

二、移動端屏幕分辨率

---

移動設備的尺寸類型非常多 , Android / iOS 手機分辨率種類很多 , 參考

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

前端開發時 , 不需要關注上述 屏幕像素密度 dpi , 密度無關像素 dp , 只需要關注 像素尺寸 px 即可 ;

三、移動端網頁調試方法

---

使用 Chrom DevTools 谷歌瀏覽器開發工具 模擬手機調試 ; 使用 360 極速瀏覽器也可以使用該開發工具 ;

進入瀏覽器 , 輸入網址 , 按下 F12 進入調試模式 , 點擊工具中的 按鈕 , 可以 切換到手機模式 ;

切換成手機模式 , 樣式如下 :

左側的下拉菜單 , 可以選擇手機型號 ;

如果沒有找到滿意的手機型號 , 可以點擊 Edit 按鈕 , 添加虛擬設備 ;

最右側的 按鈕 , 可以旋轉手機的橫豎屏 , 下面是橫屏樣式 :

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。