響應式佈局 meta詳解

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

響應式佈局詳解之head標籤新增的屬性詳解

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

表示:設定螢幕按1：1的尺寸顯示，在 iPhone 和其他智慧手機的瀏覽器提供網站全檢視瀏覽，並禁止使用者縮放頁面。

<meta http-equiv="X-UA-COMPATIBLE" CONTENT="IE=edge,chrome=1">

表示：如果安裝了GCF，則使用GCF(Chrome核心 :Google Chrome Frame)來渲染頁面「"chrome=1"」，如果沒有安裝GCF，則使用最高版本的IE核心進行渲染「"IE=edge"」。 http-equiv="X-UA-Compatible"這個是IE8的專用標記，是用來指定Internet Explorer 8 瀏覽器模擬某個特定版本IE瀏覽器的渲染方式，以此來解決IE瀏覽器的相容問題。

下面是轉載的更詳細的

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 -->
<html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head>
    <!-- 宣告文件使用的字元編碼 -->
    <meta charset='utf-8'>
    <!-- 優先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" 
 content="IE=edge,chrome=1"/>
    <!-- 頁面描述 -->
    <meta name="description" content="不超過150個字元"/>
    <!-- 頁面關鍵詞 -->
    <meta name="keywords" content=""/>
    <!-- 網頁作者 -->
    <meta name="author" content="name, [email protected]"/>
    <!-- 搜尋引擎抓取 -->
    <meta 
 name="robots" content="index,follow"/>
    <!-- 為移動裝置新增 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 會導致 iPhone 5 新增到主屏後以 WebApp 全屏模式開啟頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
 
    <!-- iOS 裝置 begin -->
    <meta name="apple-mobile-web-app-title" content="標題">
    <!-- 新增到主屏後的標題（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否啟用 WebApp 全屏模式，刪除蘋果預設的工具欄和選單欄 -->
 
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 新增智慧 App 廣告條 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 設定蘋果工具欄顏色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
    <!-- 啟用360瀏覽器的極速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用相容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微軟的老式瀏覽器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc強制豎屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ強制豎屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC強制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ強制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC應用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ應用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 點選無高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 圖示 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，預設 57x57 畫素，必須有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 畫素，可以沒有，但推薦有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 畫素，可以沒有，但推薦有 -->
    <!-- iOS 圖示 end -->
 
    <!-- iOS 啟動畫面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 豎屏 768 x 1004（標準解析度） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 豎屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 橫屏 1024x748（標準解析度） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 橫屏 2048x1496（Retina） -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 豎屏 320x480 (標準解析度) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
    <!-- iOS 啟動畫面 end -->
 
    <!-- iOS 裝置 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁貼顏色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁貼圖示 -->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 新增 RSS 訂閱 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 新增 favicon icon -->
 
    <title>標題</title>
</head>轉自：https://segmentfault.com/a/1190000008414096

響應式佈局 meta詳解

響應式佈局詳解之head標籤新增的屬性詳解 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 表示:設定螢幕按1

響應式佈局 meta詳解

響應式佈局詳解之head標籤新增的屬性詳解<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">表示:設定螢幕按1：1

CSS3響應式佈局meta viewport屬性

CSS響應式佈局--三欄佈局例項演示及優缺點詳解

學前端的小夥伴們都知道，CSS學起來很容易，但是要學精通了卻特別難。在前端市場需求火熱的今天，競爭相當激烈，光是會使用或者一兩種實現的方式是遠遠不夠的。不僅如此，還要深知各種解決方案的優劣，對各種特性瞭如指掌。本次介紹的內容是CSS響應式佈局--三欄佈局這是一道前

響應式佈局和自適應佈局詳解

注：響應式佈局等於流動網格佈局，而自適應佈局等於使用固定分割點來進行佈局。自適應佈局給了你更多設計的空間，因為你只用考慮幾種不同的狀態。而在響應式佈局中你卻得考慮上百種不同的狀態。雖然絕大部分狀態差異較小，但仍然也算做差異。它使得把握設計最終效果變得更難，同樣讓響

響應式佈局詳解

響應式佈局的目的：為移動裝置提供更好的體驗，用技術使網頁適應從小到大不同解析度的螢幕有一句話對響應式佈局的形容非常貼切：content like water。 1.viewpoint viewpoint：螢幕上用於顯示網頁的一塊區域（可能比瀏覽器的視區要寬，也可能要窄

HTML之meta&&響應式佈局

meta 在head標籤中的meta標籤,可以為HTML文件提供額外資訊 meta屬性主要分為兩組 1.name屬性與content屬性 name屬性用於描述網頁,它是以名稱/值形式的名稱,name屬性的值所描述的內容(值)通過content屬性表示,便

Jmeter正則表達式提取器詳解

正整數 image $1 默認值應用貪婪模式 ria 多次正則名稱：次正則提取器的名稱，最好取名唯一且有意義，為了方便與其他正則提取器區分。 Apply to:應用範圍 Main sample and sub_samples Main sample only

Mysql數據庫分布式事務XA詳解

oar 存儲引擎成了 from get 分布式事務 value ive 進展 XA事務簡介 XA 事務的基礎是兩階段提交協議。需要有一個事務協調者來保證所有的事務參與者都完成了準備工作(第一階段)。如果協調者收到所有參與者都準備好的消息，就會通知所有的事務都可以提交了（第

meta 詳解，html5 meta 標簽日常設置（轉）

user 針對 html keywords desc obi 360瀏覽器 initial friendly <!DOCTYPE html>  <html lang="zh-cm

Selenium Grid分布式測試入門詳解

lena 客戶端 odi before ons cycle lean efault 命令本文對Selenium Grid進行了完整的介紹，從環境準備到使用Selenium Grid進行一次完整的多節點分布式測試。運行環境為Windows 10，Selenium版本為

身份證號碼的正則表達式及驗證詳解(JavaScript，Regex)

新疆選擇 ade 理學澳門如果 span card div 簡言在做用戶實名驗證時，常會用到身份證號碼的正則表達式及校驗方案。本文列舉了兩種驗證方案，大家可以根據自己的項目實際情況，選擇適合的方案。身份證號碼說明居民身份證號碼，正確、正式的稱謂應該是“公民身份

【APP接口開發】常用HTTP響應頭狀態碼詳解

服務器客戶端 http app 狀態不存在性能添加但是 1、200 OK，客戶端請求城成功 2、400 Bad Request ，客服端請求語法錯誤，服務器無法理解和處理 3、401 unauthorized，請求未通過認證 4、403 permission fo

Android 開發：（七）常用佈局屬性詳解

第一類:屬性值為true或false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相對於父元素完全居中 androi

Android線性佈局和相對佈局的詳解和區別

一、線性佈局（LinearLayout）線性佈局：線性佈局是我們在開發中最常見的佈局方式之一，線性佈局可以分為水平線性佈局和垂直線性佈局這兩種佈局方式線性佈局的屬性（決定佈局中元素的位置和佈局）： android:layout_gravity ( 是本元素相對於父元素的

響應式佈局——CSS Media Query

前言現在越來越多的人使用手機平板等移動裝置來瀏覽網站，所以網站開發中響應式佈局非常重要。下面記錄一個簡單的響應式佈局方案，使用 HTML+CSS 來實現，（CSS Media Query）。並附上一個響應式簡單部落格。實現原理本次記錄的響應式開發原理非常簡單，就是通過

HTTP響應頭狀態碼詳解

HTTP狀態碼列表狀態碼含義 100 客戶端應當繼續傳送請求。這個臨時響應是用來通知客戶端它的部分請求已經被伺服器接收，且仍未被拒絕。客戶端應當繼續傳送請求的剩餘部分，或者如果請求已經完成，忽略這個響應。伺服器必須在請

web前端之響應式佈局，你必須要知道的

一、前言響應式Web設計可以讓一個網站同時適配多種裝置和多個螢幕，可以讓網站的佈局和功能隨使用者的使用環境（螢幕大小、輸入方式、裝置/瀏覽器能力）而變化。本文主要介紹一些響應式佈局容易忽略但又很重要的知識點。二、視口移動前端中常說的 viewport （視口）就是瀏覽器中用於呈現網

笨鳥兒靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

一、靜態佈局（Static Layout）即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會

CSS - 響應式佈局

概念隨著網頁大小的改變，而改變佈局的響應方式。例如：https://www.golaravel.com/ 實現方式 - interger 設定觸發寬度網頁小於<integer>設定寬度 @m

響應式佈局 meta詳解

相關推薦