HTML5手機端網站開發meta設定

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

前端在進行手機端頁面開發時，需要在頁面head中完成很多基本設定，確保頁面在手機端的顯示效果。在開發的過程中，是通過meta標籤的設定。

1.viewport標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
屬性介紹：
width  ----  viewport的寬度（width=device-width意思是：寬度等於裝置寬度）  
height ------  viewport的高度（height=device-height意思是：高度等於裝置寬度）  
initial-scale ----- 初始的縮放比例  
minimum-scale ----- 允許使用者縮放到的最小比例  
maximum-scale ----- 允許使用者縮放到的最大比例  
user-scalable ----- 使用者是否可以手動縮放

2.禁止將數字變成電話號碼，IOS和Android系統都會預設某長度內的數字為電話號碼，即使不加也是會預設顯示為電話

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

3.iphone裝置中的safari私有meta標籤，允許全屏模式瀏覽，隱藏瀏覽器導航欄

<meta name="apple-mobile-web-app-capable" content="yes" />

4.iphone私有標籤

// 指定的iphone中safari頂端的狀態條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black">  
預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）

另外還有一個個性化的link標籤，它支援使用者將網頁建立快捷方式到桌面時，其圖示變為我們自己定義的圖示。比如手機騰訊網上的標籤：

<link rel="apple-touch-icon-precomposed" href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">

彙總一下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>web_mobile</title>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

完成以上設定後，就可以較好的進行手機端頁面開發。本文結。

HTML5手機端網站開發meta設定

前端在進行手機端頁面開發時，需要在頁面head中完成很多基本設定，確保頁面在手機端的顯示效果。在開發的過程中，是通過meta標籤的設定。1.viewport標籤<meta name="viewport" content="width=device-width, init

HTML5手機端網頁開發

<html lang="zh-cn" style="font-size: 64.6875px;"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" c

Html5+jQuery Mobile開發手機端網站感想與總結-（初）

看jQuery Mobile相關方面的東西，看了幾天，發現，其實除了裡邊預設的圖示、主題、以及點選後跳轉的效果之外，其他的東西，和普通的html頁面一樣。 jQuery Mobile注意事項： 1、新的頁面開始，標註：data-role=“page” 2、頁面中的角色：da

音樂網站開發建設定制，手機版DJ音樂網站制作

www 網站制作網易 for 手機 www. 開發定制酷我專業定制DJ音樂網站，在線音樂播放網站源碼開發建設???模仿qq音樂網站，蝦米音樂網站，網易雲音樂網站，酷我音樂網站，酷狗音樂網站開發定制等。承接dj音樂站搭建一條龍服務。本公司專業定制，網站開發建設服務，Q

HTML5手機端開發－適配手機端瀏覽器1

1、如何網頁的寬度自適應螢幕？在head標籤裡新增以下程式碼: <meta name="viewport" content="width=device-width"/> 2、在

JeeSite 4.0 彩38完整修復版+H5自適應手機版網站開發環境部署運行調試

res not amp charset collate 3.3 end 最好 mapper 環境要求 1、彩38完整源碼下載+帶H5自適應手機版下載 2、話仙源碼論壇下載 3、Apache Maven 3.3+ 下載 4、MySql 5.7+ 下載導入到Eclipse 1

HTML5 手機端圖片上傳預覽

1、html頁面 <div class="addFile"> <p class="company">資料上傳</p> <div class="photoes getoutinput"> <div class="uplist">

HTML5手機端拍照上傳

最近在嘗試做手機端拍照上傳的專案，之前用微信JS-SDK 發現有時候上傳照片會有問題，下載後的照片只有一半。所以改用了HTML5上傳，在做這一點上傳中也學習了一下JS和HTML5的一些標籤。記錄一下。首先需要在頁面新增HTML5控制元件 capture="camera

html5手機端的點選彈出側邊滑動選單程式碼

1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="

html5手機端觸屏事件(touch事件)第二章

touchstart: // 手指放到螢幕上的時候觸發 touchmove: // 手指在螢幕上移動的時候觸發 touchend: // 手指從螢幕上拿起的時候觸發 touchcanc

ionic3+Angular4+cordova 環境搭建（手機端App開發）

一、框架：ionic3+Angular4+cordova 二、環境搭建：安裝node.js（為了使用npm來安裝ant，cordova，ionic）驗證： 2.下載jdk，並配置環境配置教程：https://blog.csdn.net/u01293432

手機端網頁開發相容性指南

毫無疑問，隨著微信的崛起，移動端網頁開發又進一步，需求量不斷攀升。但是智慧手機市場的豐富多彩，百花齊放，導致移動端的網頁開發和傳統的 PC 端網頁開發有所不同。很多人可能正邁向手機端網頁開發，但又聽說手機端網頁開發有著這樣或那樣的問題，所以有些忐忑。這裡，

用react native模仿著寫html5手機端的APP

House https://github.com/DangrMiao/House 這是去年年底用react native寫的一個html5專案，由於時間關係，完成的比較粗糙，請多多指教，大神勿噴^_^

手機端開發，基礎設定1-body-fontsize

一、設計稿設計大小按照750設計。二、單位使用rem，相對於body fontsize 相對大小計算。三、假設750下，body fontsize 為100，為了方便計算。四、通過設定當前裝置的 fontsize值，賦予 rem，變值屬性。 rem.js： (fun

rem手機端響應式開發設定

@media screen and (min-width: 320px) { html { /* iPhone5的320px尺寸作為12px基準，以後所有型號按此比例縮放 */ font-size: calc(75% + (100vw -

html5手機網站需要加的那些meta標籤，手機網站自適應

1、移動網站要加的html5相關meta和標籤 a、 <meta name="viewport" content="width=device-width, initial-scale=1, mi

Flask專案之手機端租房網站的實戰開發（五）

說明：該篇部落格是博主一字一碼編寫的，實屬不易，請尊重原創，謝謝大家！接著上一篇部落格繼續往下寫：https://blog.csdn.net/qq_41782425/article/details/85706012 注：在此專案中我不會使用程式碼塊插入程式碼，而是通過插入圖片來進行演

Flask專案之手機端租房網站的實戰開發（四）

說明：該篇部落格是博主一字一碼編寫的，實屬不易，請尊重原創，謝謝大家！接著上一篇部落格繼續往下寫：https://blog.csdn.net/qq_41782425/article/details/85676643 注：在此專案中我不會使用程式碼塊插入程式碼，而是通過插入圖片來進行演

Flask專案之手機端租房網站的實戰開發（三）

說明：該篇部落格是博主一字一碼編寫的，實屬不易，請尊重原創，謝謝大家！接著上一篇部落格繼續往下寫：https://blog.csdn.net/qq_41782425/article/details/85623829 注：在此專案中我不會使用程式碼塊插入程式碼，而是通過插入圖片來進行演

Flask專案之手機端租房網站的實戰開發（二）

說明：該篇部落格是博主一字一碼編寫的，實屬不易，請尊重原創，謝謝大家！接著上一篇部落格繼續往下寫：https://blog.csdn.net/qq_41782425/article/details/85613780 目錄一丶建立專案二丶建立工程目錄(拆分manage.py

HTML5手機端網站開發meta設定

相關推薦