移動web學習筆記

時間 2019-11-09

標籤移動 web 學習筆記欄目無線简体版

原文原文鏈接

學習博客： 《移動資源整理》 BY 白樹css

meta基礎知識：html

H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面:ios

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

viewport：web

viewport 既不是W3C的正式標準，也不是Web標準。它是Apple公司首先在iPhone中的Safari瀏覽器中實現了viewport meta標籤，而後，其餘瀏覽器也快速採納了。chrome

@viewport CSS規則windows

使用@viewport規則和使用meta標籤的效果同樣。如：瀏覽器

@viewport{
  width:device-width;
  zoom:2;//zoom等同於viewport meta標籤中的initial-scale屬性
  max-zoom:3;//等同於maximum-scale
  min-zoom:0.50;//等同於minimum-scale
  user-zoom:fixed;// 等同於user-scaleble屬性
}

@viewport 與 Media Query配合使用app

能夠在media query中使用@viewport，達到更加精準的優化。如工具

@media screen and(max-width:400px){
   @-ms-viewport{width:320px;}
    ....
}

IE10/11，opera，webkit，moz都支持，須要加廠商前綴學習

@-webkit-viewport{...}
@-moz-viewport{...}
@-ms-viewport{...}
@-o-viewport{...}
@viewport{...}

（下邊這些是剛知道的）

忽略講頁面中的數字識別爲電話號碼

<meta name="format-detection" content="telephone=no"/>

忽略Android平臺中對郵箱地址的識別

<meta name="format-detection" content="email=no"/>

format-detection

format-detection是「格式檢測」，是用來檢測html中的一些格式，除了telephone和email還能夠設置adress

●telephone

一串沒加連接的數字，iPhone會自動給加連接樣式而且點擊這串數字還會自動撥號。

telephone=no --- 禁止吧數字轉化爲撥號連接

telephone=yes（默認值） --- 開啓吧數字轉爲撥號連接，

●email

不識別郵箱，點擊以後不會自動發送

email=no --- 禁止做爲郵箱地址

email=yes（默認值） --- 開啓把文字默認爲郵箱地址

●adress

adress=no --- 禁止跳轉到地圖

adress=yes（默認值） --- 開啓點擊地址直接跳轉到地圖的功能。

當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的Safari

<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- ios7.0版本之後，Safari上已看不到效果 -->

apple-mobile-web-app-capable
content可取yes（默認值）和no，是否須要顯示工具欄和菜單欄

將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式

<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 可選default、black、black-translucent -->

apple-mobile-web-app-status-bar-style
控制狀態欄顯示樣式，black-translucent(黑色加遮罩層的效果，顯示)

viewport模板

viewport模板----通用

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no"/>        
  <meta name="format-detection" content="email=no"/> 
  <title>標題</title> 
</head> 
<body> 主體內容部分 </body> 
</html>

常見問題

移動端如何定義字體font-family

中文字體使用系統默認的，英文的用Helvetica

body{font-family:Helvetica;}

移動端字體單位font-size選擇px仍是rem

適配少部分手機設備，且分辨率對頁面影響小，使用px

須要適配各類移動設備，使用rem

使用媒體查詢設置根部字體的大小；

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}