1. 程式人生 > >HTML5手機端網站開發meta設定

HTML5手機端網站開發meta設定

前端在進行手機端頁面開發時,需要在頁面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、<!-- 強制讓文件與裝置的寬度保持1:1 -->    <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