H5下自適應頁面的meta 與 CSS
學習H5的過程中遇到了一些基礎問題，尋找到了一些答案後，整理下來，供大家一起參考學習。
META標籤
<!DOCTYPE html>
H5標準宣告，使用 HTML5 doctype，不區分大小寫
<head lang=”en”> 標準的 lang 屬性寫法 <meta charset=’utf-8′> 宣告文件使用的字元編碼 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 優先使用 IE 最新版本和 Chrome <meta name=”description” content=”不超過150個字元”/> 頁面描述 <meta name=”keywords” content=””/> 頁面關鍵詞 <meta name=”author” content=”name,[email protected]”/> 網頁作者 <meta name=”robots” content=”index,follow”/> 搜尋引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 為移動裝置新增 viewport <meta name=”apple-mobile-web-app-title” content=”標題”> iOS 裝置 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 新增到主屏後的標題（iOS 6 新增） 是否啟用 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”/> 設定蘋果工具欄顏色 <meta name=”renderer” content=”webkit”> 啟用360瀏覽器的極速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用相容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不讓百度轉碼 <meta name=”HandheldFriendly” content=”true”> 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 <meta name=”MobileOptimized” content=”320″> 微軟的老式瀏覽器 <meta name=”screen-orientation” content=”portrait”> uc強制豎屏 <meta name=”x5-orientation” content=”portrait”> QQ強制豎屏 <meta name=”full-screen” content=”yes”> UC強制全屏 <meta name=”x5-fullscreen” content=”true”> QQ強制全屏 <meta name=”browsermode” content=”application”> UC應用模式 <meta name=”x5-page-mode” content=”app”> QQ應用模式 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 點選無高光 設定頁面不快取 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>
轉自：http://www.cnblogs.com/sysg/p/6541686.html
viewport ——meta
@viewport——CSS
MDN解釋原話為：“A zoom factor of 1.0 or 100% corresponds
to no zooming. Larger values zoom in. Smaller values zoom out.”
翻譯過來的語境含義為：當“zoom”的值為“1”、“1.0”、“100%”時，不對應縮放。此值與縮放效果成正比：值越大，縮放效果越大。具體描述符如下：
zoom： 設定初始縮放因子。
min-zoom： 設定最小縮放倍數。值：auto
| <number> | <percentage> ；如 auto | 2.0 | 150%
max-zoom： 設定最大縮放倍數。值：auto | <number> | <percentage> ；如 auto | 2.0 | 150%
user-zoom： 使用者是否可以改變縮放倍數。值：zoom | fixed。NOTE:能 | 不能。這個是設定自適應的關鍵，不然會產生各種可以縮短前端開發人員壽命的未知錯誤。
width： 設定兩個速記描述符min-width和max-width
min-width： CSS設定通過的文件視區的最小寬度。值可以為：auto | <length> | <precentage>|；如：auto | 66px、88em | 10%、20%
max-width： CSS設定通過的文件視區的最大寬度。值同上。
orientation： 控制文件的方向。可以使用該描述符來抑制裝置傾斜時，文字文件方向的改變。值：auto | portrait | landscape;
有收穫了再來更。。。
相關推薦
H5下自適應頁面的meta 與 CSS
學習H5的過程中遇到了一些基礎問題，尋找到了一些答案後，整理下來，供大家一起參考學習。META標籤<!DOCTYPE html> H5標準宣告，使用 HTML5 doctype，不區分大小寫<head lang=”en”> 標準的 lang 屬性寫
css自適應頁面的的單位處理
在進行自適應網站製作的時候，處理電腦端還好一些，將內容幾種到制定的寬度區域即可，在大多數電腦和瀏覽器都能正產顯示。但是手機端就有些麻煩了，手機螢幕的寬度各不相同。如何去適應這些手極端的頁面顯示。 在手機端的頁面顯示中，我們排版一般採用的寬度、高度可以使用百分比個格式來表示，但是在不同的手機上，還是有
手機端自適應頁面通用CSS及公用HTML寫法
把頁面的通用屬性全部寫出來。 所有的手機端新建專案時候都可以直接拿這套程式碼快速搭建一個手機端框架。 js中規定了頁面最大寬度。為16rem。所以width：16rem；就等於width：100%； 我一般喜歡把邊距設定為0.5rem。所以頁面一般寬度我寫了15rem。
響應式布局簡易自適應頁面代碼
content deb search side 響應式 n-n sidebar orm post <header> <div id="pagewrap"> <header id="header">
easyui Datagrid 表格高度計算及自適應頁面的實現
-o tco text pri ucc orm nat center yui 因為頁面上既要計算表格的高度，又要自適應瀏覽器大小，之前都都采用固定表格高度，這樣就會導致不同的分辨率電腦上看起來表格高矮不一， 所以采用了計算網頁高度和其他div 的高度之差作為表格的初始高度
解決手機端自適應頁面出現 X軸滾動條問題
最近在用 Bootstrap 寫一個需要適配 WEB 和 WAP 的網站，寫完後發現 WAP 端總是會出現橫向滾動條，也就是 X 軸滾動條，導致 WAP 端頁面左右滑來滑去，很是令人蛋疼，即使設定了 overflow-x： hidden 也無法去除，通過各種途徑尋找解決方法，最終在 張鑫
pc端自適應頁面之新聞列表頁
近兩天做了個PC端自適應列表頁，遇到頗多麻煩。 首先讓我們一起來分析下頁面頁面是左右結構的，左邊是選單，右邊才是列表，然而問題來了，請看圖 這便是頁面佈局，還要考慮自適應，首先，左側的導航不用說，那我們來說說右面的列表，列表圖片是固定大小的（px），標題超出一行顯示省略號，程
iframe高度自適應頁面的高度
<div class="tpl-content-wrapper"> <iframe id="frameId" frameborder="0" scrolling="no" height="auto" src="" onLoad="iFrameHei
Bootstrap模板程式碼+頁面自適應頁面的案例程式碼
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content=
記錄:小程式前端開發之tab選項卡與swiper高度自適應的問題與解決記錄
小白前端，記錄一下自己平時遇到的問題與解決方案，方便用到的時候檢視。 今天，自己弄了一個選項卡，選項卡內容沒有問題，可是到了選項卡下面的swiper的時候，就卡住了，我的需求是swiper裡面的內容可以根據資料來自適應高度。因為swiper小程式必須要有固定的高度，不然就得
H5-WebApp 自適應方案
對於WepApp來說，為了更通用地滿足各種機型的自適應佈局要求，我們可以採用rem佈局方案。 rem是相對於根元素（html）字型大小的單位，他只是一種相對單位。不同於另一個相對單位em，em是相對
自適應頁面佈局使得應用適應不同螢幕的尺寸變得更加容易
在今天的這篇文章中，我們將介紹在Ubuntu平臺中如何使用頁面佈局自動適配不同的螢幕尺寸，從而使得同一個應用在不同螢幕尺寸上使得我們的應用顯示更加合理。更確切地說我們在不同的螢幕尺寸的裝置中不需要修改我們的程式碼。這對於為了Ubuntu平臺的convergence非常有用。
固定寬度佈局開發WEBAPP如何實現多終端下自適應？
這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【 固定寬度佈局開發WEBAPP如何實現多終端下自適應？】 大家好，我是IT修真院北京分院第
bootstrap 、Jquery-WeUI微信開發頁面---怎麼自適應頁面
使用bootstrap 微信開發頁面,配置樣式使其可以自適應 在頁面中 新增 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable
bootstrap 的自適應頁面簡單使用
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge
自適應Simpson法與積分初步
前言 不知道為什麼，今天感覺想要寫一下數學的東西，然後就看了一下我還有這個模板不會，順手寫了一下。 沒有學過微積分的最好還是看一下求導為好。 積分 定義就是曲面圍成的面積。 然後就是許多的式子qwq（這個直接背記就好了。） 當然如果有網的話也可以查。 開始 假定我們現在已經有了一個函式\(f(
jQuery實現等比例縮放大圖片讓大圖片自適應頁面佈局
在佈局頁面時，有時會遇到大圖片將頁面容器“撐破”的情況，尤其是載入外鏈圖片（通常是通過採集的外站的圖片）。那麼本文將為您講述使用jQuery如何按比例縮放大圖片，讓大圖片自適應頁面佈局。 通常我們處理縮圖是使用後臺程式碼（PHP、.net、Java等）根據大圖片生成一定尺寸的縮圖，來供前臺頁面呼叫，當然也
html自適應頁面上下左右分欄的處理技巧
html自適應頁面上下左右分欄的效果可以借用CSS或者jQuery進行處理。 CSS中的width和height屬性的值帶%的情況： height:100% 代表基於包含它的塊級物件（即父元素）的百分比高度，此時為100%。 width:100% 代表基於包含它的塊級物件（
H5手機自適應
自適應meta頭部程式碼： <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height, initial-scal
js動態添加iframe，自適應頁面寬高
www. obj () iframe spa margin ber client document function showIframe(url,w,h){ //添加iframe var if_w = w; var if_h = h; $("&