溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5移動端手機網(wǎng)站基本模板的示例代碼

發(fā)布時間：2022-02-24 10:59:55 來源：億速云 閱讀：657 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)HTML5移動端手機網(wǎng)站基本模板的示例代碼的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

HTML5移動端最根底網(wǎng)頁模板代碼(如下HTML代碼可直接拷貝復(fù)制使用)：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手機站點最根底HTML模板</title>
<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">
<meta name="author" content="CSS5, css5.com.cn" />
<style>
body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
.viewport{ max-width:640px; min-width:300px; margin:0 auto;}
</style>
</head>

<body>
<div>
各人好！迎接CSS5學(xué)習(xí)HTML開荒！
</div>
</body>
</html>

HTML5主要代碼剖明：

1、代碼：

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

抒發(fā)：

width ---- viewport的寬度（width=device-width含意是：寬度即是裝備寬度）
height ------ viewport的高度（height=device-height含義是：高度即是裝備寬度）
initial-scale ----- 初始的縮放比例
minimum-scale ----- 容許用戶縮放到的最小比例
maximum-scale ----- 允許用戶縮放到的最大比例
user-scalable ----- 用戶能否也許手動縮放

2、代碼

<!doctype html>

 評釋：

doctype簡寫，簡寫HTML申明，支持PC和移動，不光僅贊成HTML5瀏覽器贊成，贊成HTML4的閱讀器也支持。

3、代碼：

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

標(biāo)明：

IOS與Android零碎都市默認(rèn)某長度內(nèi)的數(shù)字為電話號碼，縱然不加也是會默許表示為電話的。

4、代碼：

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

講明：

準(zhǔn)予全屏模式瀏覽，竄伏閱讀器導(dǎo)航欄

5、代碼：

<meta name="apple-mobile-web-app-status-bar-style" content="black">

評釋：

它指定的iphone中safari頂真?zhèn)€外形條的花樣
默許值為default（雪白色），大約定為black（彩色）和black-translucent（灰色半無色）
其他還有一個共性化的link標(biāo)簽，它贊成用戶將網(wǎng)頁建立極快辦法到桌面時，其圖標(biāo)釀成咱們本身界說的圖標(biāo)。

以上幾個標(biāo)簽與代碼，一定要主宰并熟悉。另有HTML5移動網(wǎng)頁框架寬度一般不設(shè)置固定值，一樣平常以百分比為寬度，例如最外層主框架寬度100%，再配置最小寬度min-width:320px，何等便可。

額定留神：HTML5移動網(wǎng)頁拓荒時，網(wǎng)頁結(jié)構(gòu)不宜蕪雜不像疇昔PC分許多列各類千般組織，再HTML5電話端網(wǎng)頁一般就構(gòu)造一列的內(nèi)容。

感謝各位的閱讀！關(guān)于“HTML5移動端手機網(wǎng)站基本模板的示例代碼”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手