文章目錄
- 移動端專案
- 移動端瀏覽器及內核分析
- viewport
- 移動端布局解決方案
移動端專案
移動端瀏覽器及內核分析
-
手機瀏覽器種類：
UC瀏覽器，QQ瀏覽器，歐朋瀏覽器，百度手機瀏覽器，360安全瀏覽器，谷歌瀏覽器， 搜狗手機瀏覽器，獵豹瀏覽器，其他雜牌瀏覽器，
國內的UC和QQ，百度等手機瀏覽器都是根據Webkit修改過來的內核，國內尚無自助 研發的內核，就像國內的手機作業系統都是基于Android修改的，
viewport
- width:設定viewport的寬度（即之前所提及到的，瀏覽器的寬度），這里可以為 一個整數，又或者是字串〃device-width〃，
- initial-scale:頁面初始的縮放值，為數字，可以是小數，
- minimum-scale:允許用戶的最小縮放值，為數字，可以是小數，
- maximum-scale:允許用戶的最大縮放值，為數字，可以是小數，
- height:設定viewport的高度（我們一般不用），
- user-scalable:是否允許用戶進行縮放，’ no’ 為不允許，’ yes’為允許我們把 這個標簽設在head里面，
移動端布局解決方案
-
固定布局
-
在＜head＞里把viewport加好，跟pc端一樣，設想整個網頁的寬度為750px居中即可， 超出部分留白，
優點：思路沿用PC端，上手簡單，
缺點：大螢屏手機及手機橫屏時，兩邊是留白較大，且大螢屏手機下看起來頁面會特 別小，操作的按鈕也很小，用戶體驗較差，
-
-
流式布局
- 流動布局重點就是使用百分比來代替傳統px，但是高度大都是用px來固定住，所以 在大螢屏的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一 樣，優點是流動布局可以很好解決自適應需求，缺點是通過大量的百分比布局，會出現兼 容性的問題，且更適用于對橫向拉伸的設計元素，設計的時候存在很多局限性，
-
回應式做法
-
根據目標用戶的訪問設備的主要型別做三種或四種布局，
每種布局有一個區間即可利用媒體查詢@media,可以為不同解析度的設備加載不同的 樣式，這種方法的優點是可以相對精確的控制顯示效果，但可能需要對同一個類書寫不同 的樣式會導致代碼比較繁復，后期維護困難
-
-
rem 布局
-
rem是指相對于根元素的字體大小的單位，即根據html元素的font-size來計算大小， 比如說 html 的 font-size 大小為 100px, 一個 div 的 width 為 1rem，則 div 的 width大小為100px
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"> -
<script> function auto() { //獲取html寬度（設備寬度） var deviceWidth = document.documentElement.clientWidth; // 720可以根據實際設計寬度進行修改 if (deviceWidth > 720) { deviceWidth = 720; } var fs = (deviceWidth * 100) / 720; document.documentElement.style.fontSize = fs + "px"; } window.onresize = function () { auto(); } </script>
-
-
vw + vh
-
vw 即 Viewport’s width 的簡寫，是 CSS3 規范中的視口單位，相對于視口的寬度，視口被均分為 100 單
位的 vw, 相對于視口的高度，視口被均分為 100 單 位的 vh，
-
750px設計稿 750px=100vw 1px = 0.1333333vw;
如果使用rem 預設1rem = 100px 100px就是 13.333333vw 由此vm和rem 就可以進行換算了
-
-
Media
-
@media (max-width: 768px) { .banner { margin-top: 44px; background-color: blue; height: 2.88rem; width: 100%; } }
-
orientation: portrait;/*鎖定為縱向*/
orientation: landscape;/* 鎖定為橫向*/
@media screen and (orientation: landscape) {
div {
width: 300px;
height: 300px;
background-color: red;
}
}
@media screen and (orientation: portrait) {
div {
width: 300px;
height: 300px;
background-color: blue;
}
}
-
兼容問題
-
小字體處理
-
不同瀏覽器的最小字體不同，有的是10px，有的是12px，
解決辦法：設定字體時，不要小于12px，如果一定要小于12px，使用
transform:scale()進行縮放，
-
-
-
移動端重置樣式
-
1、禁止用戶選中文字，安卓無效（在事件那章解決，包括長按的時候會出選單，用阻止 touchstart 后的默認
行為搞定），
-webkit-user-select: none;
2、禁止長按彈出系統選單
-webkit-touch-callout: none;
3、去除 android 下 a/button/input 標簽被點擊時產生的邊框 & 去除 ios 下 a 標簽被點擊時產生的半透明灰
色背景，
-webkit-tap-highlight-color: rgba(0,0,0,0);
4、切換橫豎屏或者用戶自己通過瀏覽器設定的話，可以改變字體的大小 ( 需要給 body 下的所有元素 )，
-webkit-text-size-adjust: 100%;
5、按鈕在 ios 下都是圓角，
-webkit-appearance: none; //button 與 input 都會有個默認背景
border-radius: 0; //input 有個默認圓角
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/241041.html
標籤：其他