2. 程式人生 > >H5手機移動端WEB開發資源整合 常用的標籤及注意事項

H5手機移動端WEB開發資源整合 常用的標籤及注意事項

阿新 • • 發佈：2019-02-01

meta基礎知識

H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面

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

忽略將頁面中的數字識別為電話號碼

<metaname="format-detection"content="telephone=no"/>

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

<metaname="format-detection"
 
content="email=no"/>

當網站新增到主螢幕快速啟動方式，可隱藏位址列，僅針對ios的safari

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

將網站新增到主螢幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式

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

viewport模板
viewport模板——通用

<!DOCTYPE html><html><head><metacharset="utf-8"><metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport"><metacontent="yes"name="apple-mobile-web-app-capable"><metacontent="black"name="apple-mobile-web-app-status-bar-style"
 
><metacontent="telephone=no"name="format-detection"><metacontent="email=no"name="format-detection"><title>標題</title><linkrel="stylesheet"href="index.css"></head><body>
這裡開始內容
</body></html>

viewport模板 – target-densitydpi=device-dpi，android 2.3.5以下版本不支援

<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值與頁面定義的寬度一致 --><metacontent="yes"name="apple-mobile-web-app-capable"><metacontent="black"name="apple-mobile-web-app-status-bar-style"><metacontent="telephone=no"name="format-detection"><metacontent="email=no"name="format-detection"><title>標題</title><linkrel="stylesheet"href="index.css"></head><body>
這裡開始內容
</body></html>

常見問題

移動端如何定義字型font-family
中文字型使用系統預設即可，英文用Helvetica

/* 移動端定義字型的程式碼 */
body{font-family:Helvetica;}

移動端字型單位font-size選擇px還是rem
對於只需要適配少部分手機裝置，且解析度對頁面影響不大的，使用px即可

對於需要適配各種移動裝置，使用rem，例如只需要適配iPhone和iPad等解析度差別比較挺大的裝置

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}}

移動端touch事件(區分webkit 和 winphone)
當用戶手指放在移動裝置在螢幕上滑動會觸發的touch事件

以下支援webkit

  • touchstart——當手指觸碰螢幕時候發生。不管當前有多少隻手指
  • touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
  • touchend——當手指離開螢幕時觸發
  • touchcancel——系統停止跟蹤觸控時候會觸發。例如在觸控過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

TouchEvent

  • touches：螢幕上所有手指的資訊
  • targetTouches：手指在目標區域的手指資訊
  • changedTouches：最近一次觸發該事件的手指資訊
  • touchend時，touches與targetTouches資訊會被刪除，changedTouches儲存的最後一次的資訊，最好用於計算手指資訊

引數資訊(changedTouches[0])

  • clientX、clientY在顯示區的座標
  • target：當前元素

參考：https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

以下支援winphone 8

  • MSPointerDown——當手指觸碰螢幕時候發生。不管當前有多少隻手指
  • MSPointerMove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫css的html{-ms-touch-action: none;}可以阻止預設情況的發生：阻止頁面滾動
  • MSPointerUp——當手指離開螢幕時觸發

移動端click螢幕產生200-300 ms的延遲響應

移動裝置上的web網頁是有300ms延遲的，玩玩會造成按鈕點選延遲甚至是點選失效。

以下是歷史原因，來源一個公司內一個同事的分享：

2007年蘋果釋出首款iphone上IOS系統搭載的safari為了將適用於PC端上大螢幕的網頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器開啟一個PC上的網頁，你可能在看到頁面內容雖然可以撐滿整個螢幕，但是字型、圖片都很小看不清，此時可以快速雙擊螢幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。

雙擊縮放是指用手指在螢幕上快速點選兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。

原因就出在瀏覽器需要如何判斷快速點選上，當用戶在螢幕上單擊某一個元素時候，例如跳轉連結<a href=”#”></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定使用者是單純要點選連結還是要雙擊該部分割槽域進行縮放操作，所以，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，如果在t時間區間裡使用者未進行下一次點選，則瀏覽器會做單擊跳轉連結的處理，如果t時間裡使用者進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分割槽域頁面的縮放操作。那麼這個時間區間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的後果使用者純粹單擊頁面，頁面需要過一段時間才響應，給使用者慢體驗感覺，對於web開發者來說是，頁面js捕獲click事件的回撥函式處理，需要300ms後才生效，也就間接導致影響其他業務邏輯的處理。

解決方案：

  • fastclick可以解決在手機上點選事件的300ms延遲
  • zepto的touch模組，tap事件也是為了解決在click的延遲問題

觸控事件的響應順序

  1. ontouchstart
  2. ontouchmove
  3. ontouchend
  4. onclick

解決300ms延遲的問題，也可以通過繫結ontouchstart事件，加快對事件的響應

什麼是Retina 顯示屏，帶來了什麼問題
retina：一種具備超高畫素密度的液晶屏，同樣大小的螢幕上顯示的畫素點由1個變為多個，如在同樣帶下的螢幕上，蘋果裝置的retina顯示屏中，畫素點1個變為4個

在高清顯示屏中的點陣圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍

那麼，前端的應對方案是：

設計稿切出來的圖片長寬保證為偶數，並使用backgroud-size把圖片縮小為原來的1/2

//例如圖片寬高為：200px*200px，那麼寫法如下

.css{width:100px;height:100px;background-size:100px100px;}

其它元素的取值為原來的1/2，例如視覺稿40px的字型，使用樣式的寫法為20px

.css{font-size:20px}

ios系統中元素被觸控時產生的半透明灰色遮罩怎麼去掉

ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

部分android系統中元素被點選時產生的邊框怎麼去掉

android使用者點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)-webkit-user-modify:read-write-plaintext-only;}

-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字元

另外，有些機型去除不了，如小米2

對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤

winphone系統a、input標籤被點選時產生的半透明灰色背景怎麼去掉

<metaname="msapplication-tap-highlight"content="no">

webkit表單元素的預設外觀怎麼重置

.css{-webkit-appearance:none;}

webkit表單輸入框placeholder的顏色值能改變麼

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

webkit表單輸入框placeholder的文字能換行麼
ios可以，android不行~

在textarea標籤下都可以換行~

IE10（winphone8）表單元素預設外觀如何重置
禁用 select 預設下拉箭頭

::-ms-expand 適用於表單選擇控制元件下拉箭頭的修改，有多個屬性值，設定它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。

select::-ms-expand {
display: none;}

禁用 radio 和 checkbox 預設樣式

::-ms-check 適用於表單複選框或單選按鈕預設圖示的修改，同樣有多個屬性值，設定它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。

input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check
{
display: none;}

禁用PC端表單輸入框預設清除按鈕

當表單文字輸入框輸入內容後會顯示文字清除按鈕，::-ms-clear 適用於該清除按鈕的修改，同樣設定使它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear
{
display: none;}

禁止ios 長按時不觸發系統的選單，禁止ios&android長按時下載圖片

.css{-webkit-touch-callout: none}

禁止ios和android使用者選中文字

.css{-webkit-user-select:none}

打電話發簡訊寫郵件怎麼實現
打電話

<ahref="tel:0755-10086">打電話給:0755-10086</a>

發簡訊，winphone系統無效

<ahref="sms:10086">發簡訊給: 10086</a>
<ahref="mailto:[email protected]">[email protected]</a>

模擬按鈕hover效果
移動端觸控按鈕的效果，可明示使用者有些事情正要發生，是一個比較好體驗，但是移動裝置中並沒有滑鼠指標，使用css的hover並不能滿足我們的需求，還好國外有個啟用css的active效果，程式碼如下，

<!DOCTYPE html><html><head><metacharset="utf-8"><metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport"><metacontent="yes"name="apple-mobile-web-app-capable"><metacontent="black"name="apple-mobile-web-app-status-bar-style"><metacontent="telephone=no"name="format-detection"><metacontent="email=no"name="format-detection"><styletype="text/css"> 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
H5手機移動端WEB開發資源整合 常用的標籤及注意事項

     
 
                

meta基礎知識

H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum 



  
 

    


    
    
關於移動端web開發的真機測試

     
 install   相對   同步   css   響應   .html   http   bsp   關於   五月已經過去一大半了，心情不太好，因為太困沒狀態，所以剛剛去跑了好幾圈，心情終於沒那麽郁悶了，來吧，今天要記錄的是在做移動端網頁時如何真機測試。
網上方法有很多，我就掌握一個就夠了<攤手&g 



  
 

    


    
    
移動端WEB開發，click,touch,tap事件淺析

     
 func   mousedown   spa   手指   滑動   兼容性   over   syntax   ack   一、click 和 tap 比較
兩者都會在點擊時觸發，但是在手機WEB端，click會有 200~300 ms，所以請用tap代替click作為點擊事件。
singleTap和dou 



  
 

    


    
    
移動端web開發進階

     
 page   提升   最終   好玩的   ini   進階   body   user   hang    
posted @ 2014-11-24 20:09 vajoy 閱讀(4708) 評論(12) 編輯 收藏
 


三個月前曾寫過一篇跨終端響應式頁面設計入門的博客，上了博客園頭條也得到了不少關註 



  
 

    


    
    
移動端web開發框架

     
 加載   數據庫服務器   dom操作   spl   應用服務器   左右   pri   tail   下拉   
一、目前移動端布局方法





兩個基本規則：移動優先，設計初期就要考慮設計的頁面如何多終端顯示。漸進增強，充分發揮硬件設備的最大功能。
三個常用方法：
   1）css3-media Q 



  
 

    


    
    
移動端web開發常見問題------彭記(023)

     
 方式   方案   產生   按鈕   適用於   效果   sap   javascrip   -a    
Meta相關
1. 添加到主屏後的標題（IOS）
<meta name="apple-mobile-web-app-title" content="標題">
2. 啟用 WebApp 全 



  
 

    


    
    
移動端web開發初探之Vuejs的簡單實戰

     
 參考   細節   重要   進行   標簽   樣式   mob   優化   view   這段時間在做的東西，是北郵人論壇APP的註冊頁。這個註冊頁是內嵌的網頁，因為打算安卓和IOS平臺同時使用。因此實際上就是在做移動端的web開發了。
在這過程中遇到了不少有意思的東西。
DEMO的github地址在這 



  
 

    


    
    
移動端web開發

     
 等於   精靈   spa   文件   最大   基本點   初始化   比例   放置   1、無論是PC端還是移動端，開發出來的頁面都是運行在瀏覽器上的；
2、移動端設備的瀏覽器大多是基於webkit內核，屬於高級瀏覽器 支持H5 C3特性；
 
視口概念
①： PC端視口取決於瀏覽器大小（HTML）- 



  
 

    


    
    
h5手機移動端 <head> <meta charset="big5"> </head>

     
 h5h5手機移動端<head><meta charset="big5"><title>ch05_02</title></head>
說明：<meta charset="UTF-8">charset= 



  
 

    


    
    
移動端web開發常見問題

     
 size   auto   eba   無需   情況   下滑   產生   masonry   tro   1、移動端如何定義字體font-family
 三大手機系統的字體：

ios 系統
默認中文字體是Heiti SC
默認英文字體是Helvetica
默認數字字體是HelveticaNeue
無微 



  
 

    


    
    
移動端Web開發除錯之Weinre除錯教程

     
  
 
 在設計師與前端開發人員的努力下，一個WebApp出爐了，可是測試人員說了一堆的問題：某某機型下頁面表現不一致，某某系統下頁面如何如何，某某系統瀏覽器下頁面怎麼怎麼滴。看著滿滿的測試彙總文件，我們曾經在一個又一個知名或不知名的手機終端上重複著這些工作：仔細的排查程式碼，alert可疑的變數，甚至不惜重 



  
 

    


    
    
移動端web開發除錯工具——Vorlon.JS上手教程

     
  
 
  
  
 問題提出： 
 在移動端頁面的日常開發中常常會碰到這樣一個問題，頁面在Chrome的Device模式下顯示正常，但在移動端瀏覽器或者內嵌到APP裡就會出現樣式問題或者Js程式碼問題，但是移動端上沒有類似Chrome的開發者除錯工具，只能通過嘗試修改，重複釋出版本來檢查問題，或者寫一大堆a 



  
 

    


    
    
移動端web開發技巧

     
  
 
 1. 新增到主屏後的標題（IOS） 
 <meta name="apple-mobile-web-app-title" content="標題">  
 2. 啟用 WebApp 全屏模式（IOS） 
 當網站新增到主屏幕後再點選進行啟動時，可隱藏位址列（從瀏覽器跳轉或輸入連結進入並沒有 



  
 

    


    
    
移動端 web 開發的設計稿與工作流

     
 致謝 
一直以來移動端適配便是困擾自己的一個難題，今天休息，查閱了很多資料將其整理出來。本文中很多做法是直接借鑑了網上的文章，主要有從網易與淘寶的font-size思考前端設計稿與工作流跟手機端頁面自適應解決方案—rem佈局進階版（附原始碼示例），向大神致謝。 
移動裝置的解析度 
 
  
   
   裝 



  
 

    


    
    
移動端web開發總結（自適應）

     
  
  
  
 關於viewport 
 移動端開發中，通常我們都會設定viewport。關於viewport 
 <meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-s 



  
 

    


    
    
fastclick.js移動端WEB開發，click,touch,tap事件淺析

     
                      一、click 和 tap 比較兩者都會在點選時觸發，但是在手機WEB端，click會有 200~300 ms，所以請用tap代替click作為點選事件。singleTap和doubleTap 分別代表單次點選和雙次點選。二、關於tap的點透處理在使用zepto框架的 



  
 

    


    
    
移動端Web開發除錯之Chrome遠端除錯(Remote Debugging)

     
 
                
在智慧手機還未普及時，移動裝置的除錯處處是alert的，這估計是最常用的辦法了。以前很多時候為了預覽頁面在移動裝置上的效果，需要先將頁面上傳到測試伺服器，再將url輸入到裝置瀏覽器，或者使用第三方二維碼掃碼應用，通過移動裝置訪問開啟瀏覽實際效果，每次換裝置都要重複這些操作， 



  
 

    


    
    
手機移動端web總結

     
 ;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = d 



  
 

    


    
    
移動端web開發總結

     
  
 
 1.前言 
   
 到目前為止，網際網路行業裡，手機越來越智慧化，移動端佔有的比例越來越高，尤其實在電商，新聞，廣告，遊戲領域。使用者要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開發而言是一個挑戰，是一個難題，也是一個機遇。如何讓我們所開發的手 



  
 

    


    
    
移動端web開發，click touch tap區別

     
 
一：click與tap比較
click與tap都會觸發點選事件，但是在手機web端，click會有200-300ms的延遲，所以一般用tap代替click作為點選事件。singleTap 和doubleTap分別代表單次點選和雙次點選
二：tap的穿透處理
使用zepto框架的tap的點選事件，來規避cli