html移動端

『壹』 html 怎麼判斷pc段和移動端

利用 html 和 css 實現不了，這個需要使用 js 來進行判斷。 js 有 瀏覽器BOM 方法，
window.navigator.userAgent 可以檢測用戶代理（即使用什麼設備）
通過這函數來進行檢測，如果是 安卓或ios 系統則跳轉到 移動端頁面 否則跳轉到 pc 端頁面。
<script type="text/javascript">
function getBrowser(){ //判斷瀏覽器是在android系統上還是在ios系統上
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = "web/index.html"; //移動端頁面
}else{
window.location.href="pc/index.html"; //pc端頁面
}
}
getBrowser();
</script>

『貳』 怎麼判斷html 是在移動端應用（app）,還是移動端瀏覽器中打開的

判斷html 是在移動端應用（app）,還是移動端瀏覽器中打開可以通過查看UA來實現。內

『叄』 html移動端的怎麼適應各種屏幕解析度

網上關於這方面的文章有很多，重復的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。

1、使用meta標簽，這也是普遍使用的方法，理論上講使用這個標簽是可以適應所有尺寸的屏幕的，但是各設備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統。
首先解釋該標簽的含義：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
如果你完全不了解這個標簽的使用需要先網路一下。
解釋：content中的「width」 這個width指的是什麼寬度，我看過的文章對這個都沒有解釋的很清楚，有幾個備選：虛擬窗口的寬度、手機屏幕的寬度、還是頁面的寬度等等？經試驗這個指的是虛擬窗口的寬度。了解寬度之後，對後續的各種scale，就應該知道是誰與誰的比例，是 虛擬窗口寬度 / 頁面寬度，這樣就會有問題出現安卓設備尺寸差異很大光主流的就有寬度為 320 480 720 1080 等各種尺寸而以上標簽只能支持一種尺寸，當然有些瀏覽器會自動縮放使其適應屏幕，但這不是統一標准，正確的做法是用js動態生成此標簽，當然，應該先獲取屏幕尺寸。
對於此標簽還有以下需要分享：
1)、user-scalable=no就一定可以保證頁面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設為1.0就可以了。
2)、initial-scale=1.0 初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會將user-scalable理解為用戶手動縮放，如果user-scalable=no，initial-scale將無法生效。
3)、手機頁面可以觸摸移動，但是如果有需要禁止此操作，就是頁面寬度等於屏幕寬度是頁面正好適應屏幕才可以保證頁面不能移動。
4)、如果頁面是經過縮小適應屏幕寬度的，會出現一個問題，當文本框被激活（獲取焦點）時，頁面會放大至原來尺寸。
以上是使用viewport標簽的一些小體會，分享給大家。

『肆』 移動APP和HTML5的區別是什麼

想了解他們之間的區別，先看一下各自的簡單定義吧。

app:主要是指application（應用程序）

HTML是hypertext markup language（超文本標記語言）

主要區別有

1.應用環境：

手機原生app面前比較流行環境是Android和IOS兩個版本。

HTML5主要是在瀏覽器中進行運行和渲染，其實瀏覽器是App的一種。

2.相關編程語言：

移動APP的編程語言一般是：c#,Java, c,vb 等...

HTML5的編程語言則是：html5,css3,javascript,php/jsp/asp 等...

3.開發成本和周期：

移動APP相對來說開發成本比較高，周期也比較長。html主要應用於前端web開發，開發製作周期短，費用少。

4.兼容性

手機app在不同的系統中需要開發不同版本（例如前面所說的Android和IOS），而html5可以跨平台主要有瀏覽器就可以運行。

5.用戶體驗。執行效率，顯示效果，可以調用的系統許可權都是不一樣的。

在用戶體驗和表現這個方面 APP提供用戶展示圖形界面和數據展現的豐富性方面要比HTML5好。而且調用的系統許可權APP相對許可權要高。

總結：html5和app各有自己優勢和不足，需求者應該根據各自的特點來選擇合適的語言。

『伍』 HTML網頁如何完美的適配到移動設備上

1、在已安裝的電腦桌面新建一個Word文檔（演示文稿以Office2007系列為主），然後打開新建的迴文檔，輸入文字。答

『陸』 移動端HTML5如何開發跟PC端有什麼區別

PC和mobile上是有區別的。

網頁主要體現在倍率上，還有HTML5兼容問題。
iphone4s倍率是2x，即2倍；
iphone6倍率是2x；
iphone 6 plus 倍率是3x；

安桌上
hdpi倍率是1.5x；

xhdpi倍率是2x；

xxhdpi倍率是3x；

要想圖片在mobile上得到圖片的原始清晰度，和大小，那麼他和PC上1x倍率的圖片對應關系是；
PC：像素 =像素 * 倍率；
例如：100px = 100px * 2 =>iphone6；這樣清晰度和大小看起來都一樣。
這樣同一張圖，在電腦上你是100px寬高，在iphone6上你就是200px的寬高，看起來清晰度差不多，若你將100px的圖片不變放到iphone6上，那麼他會變得比想像中小。若你又不想增加寬度200px達到目的，那麼你可以按照如下解決問題。
解決手機上全屏顯示（小圖適配顯示，會放大，犧牲清晰度為代價）的方法是在head中加入

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

meta告訴瀏覽器設備初始時候無縮放，最大縮放為原始大小，用戶不可以縮放。
我僅給你講解有很大倍率區別，需要專業學習倍率。

至於html5和一些標簽，js的兼容就容易理解多了。
PC要考慮IE8隻兼容部分html5標簽，IE9也不夠完全。

其他一些 flash運用，交互也是有區別的。
iphone不知道flash，上繫上js多了觸控事件，PC的是點擊事件等

『柒』 移動端的和網頁的前端代碼一樣都是html和css嗎

移動端分為兩種東西，一種是手機APP，另一種則是移動端的網頁
如果是移專動端的網頁，使用的屬前端代碼就是和PC端一樣的html與CSS以及JavaScript這幾大技術實現的，當然移動端的網頁和PC端的網頁，在布局等功能上面實現起來並不相同，具體知識可以參照書籍《HTML5布局之路》上的講解。
如果是移動端的APP，則使用的代碼和前端代碼完全不同，iOS使用的是Object C語言，而安卓上的APP使用的是JAVA語言。

『捌』 如何用html5構建移動端的webapp

H5e教育html5開發為您解答：
移動web在當今的發展速度是一日千里，作為移動領域的門外漢，在這段時間的接觸後，發現前端開發這一塊做一個小小的總結。
1.四大瀏覽器內核
1.Trident (IE瀏覽器) :因為在早期IE佔有大量的市場份額，所以以前有很多網頁是根據這個Trident的標准來編寫的，但是實際上這個內核對真正的網頁標准支持不是很好，同時存在許多安全Bug。
2.Gecko:( FireFox )優點就是功能強大、豐富，可以支持很多復雜網頁效果和瀏覽器擴展介面，缺點是消耗很多的資源，比如內存。
3.Webkit: ( Chrome/ Safari / UC )優點就是Webkit擁有清晰的源碼結構、極快的渲染速度，缺點是對網頁代碼的兼容性較低，會使一些編寫不標準的網頁無法正確顯示。
4.Presto: ( 歐朋 ) Presto內核被稱為公認的瀏覽網頁速度最快的內核，同時也是處理JS腳本最兼容的內核，能在Windows、Mac及Linux操作系統下完美運行。
移動端開發主要對象是手持設備，其中絕大部分是IOS和Android系統，基於Webkit內核，可使用Chrome瀏覽器調試即可。
2.手機瀏覽器
瀏覽器已經逐漸從傳統桌面轉向手機端，競爭也越來越激烈。目前國內市場主流的手機瀏覽器：UC、網路、歐朋、QQ、海豚、safari、Chrome，這些瀏覽器都是基於webkit內核的，兼容性方面不存在問題，同時對html5和css3的支持很好，所以，大膽地應用html5和css3技術吧。
在開始編寫webapp時，前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現一些HTML4中無法實現的豐富的WEB應用程序 的體驗，可以減少開發者很多的工作量，當然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標簽的作用。比如定義一塊內容或文章區域 可使用section標簽，定義導航條或選項卡可以直接使用nav標簽等等。
3.終端解析度
手機解析度比PC解析度要龐雜得多，各種解析度有木有？大小差距那麼大有木有？這在一定程度上給頁面製作帶來了不小的麻煩。所以針對這樣的因素，必須有充分的考慮。考慮到瀏覽器自適應，需要設計和製作完成各種不同的方法。
1) 市場上主流手機生產商的產品解析度。經過調研發現，目前主流的手機解析度為：480*800像素、320*480像素，而1280*720像素（720P）會是接下來的趨勢。這些都是很粗略的統計，要有精確的數據需要花費不少的精力，那是數據分析人員的工作。
2) 項目目標群所持設備的解析度。項目目標群即用戶，用戶擁有什麼樣的手機解析度，從一定程度上來說比第一點來得更加重要，它決定著項目開發的方向。
4.響應式web開發
在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內層）的寬度定死。為達到適配各種手持設備，我建議前端工程師使用自適應布局模式（支付 寶 採用了自適應布局模式），因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，你無需再次考慮設備的解析度。
響應式web開發不是一項開創性的技術變革，簡單地說，響應式web設計採用了媒體查詢、流式布局、液態圖片三項技術，把它們組合在一起來製作頁面，使得頁面不只在傳統桌面，在平板電腦和手機上，各種不同的解析度都能夠完美顯示。而要做到這點，我覺得不難，請繼續往下：
1) 准備工作：
a) 插件安裝：window resize。您可以通過下載安裝谷歌瀏覽器插件，安裝成功後，當您調整瀏覽器窗口時，在瀏覽器右下角會有灰度提示當前窗口和類似於手機視圖的大小提示。
b) 編輯器安裝：Hbulder或Webstorm
c) 弄清視圖和屏幕的區別。視圖是瀏覽器的內容顯示區域，屏幕是設備的物理顯示區域。比如視圖寬度我們一般用width表示，而屏幕寬度是用device-width來表示。相信做過手機頁面的童鞋都經常見過這段代碼：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中width=device-width就是說把頁面寬度設置成和屏幕寬度一樣。
d) 響應式設計創意網站收集 。這里有很多響應式Web設計的網站，供您參考和學習。
2) 征途ING：
e) 響應式web設計之媒體查詢：
為了減少http請求，我想在css樣式表裡進行媒體查詢會是個不錯的選擇，而不是在頁面head部分使用link進行載入。樣式表裡的媒體查詢格式為：
@media screen and (max-width:960px){}
大括弧內部書寫樣式。該語句相當於判斷語句，有兩個條件，一個是視口寬度最大不超過960px，screen代表顯示屏，這兩個條件都具備了，就調用大括弧內的樣式。
f) 響應式web設計之流式布局：
流式布局以百分比進行布局。最重要是時刻關注元素的父級層，所有的元素都是以父級層為基準。流式布局的應用是為了和媒體查詢完美地結合，形成平滑的布局變 化跳轉效果。一般而言，media里的樣式多以width、padding、margin、font-size、line-height這些為主。
g) 響應式web設計之液態圖片：
要實現液態圖片，只需加入如下代碼：img{max-width:100%;}
web移動頭部書寫

1、首先我們來看看webkit內核中的一些私有的meta標簽，這些meta標簽在開發webapp時起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
這個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
<meta content="yes」 name=" apple-mobile-web-app-capable" />
meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
<meta content="black" name=" apple-mobile-web-app-status-bar-style" />
meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
<meta content="telephone=no" name="format-detection" />
meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼

『玖』 html5怎樣做移動端開發

隨著互聯網的高速發展，軟體行業更加火爆，幾乎高薪職位都與軟體行業掛勾，程序員內成了高薪的標志。容HTML5作為近幾年非常火的軟體開發語言，更是得到了多人一致的好評和青睞。既然HTML5這么火，學習這門課程當然前景更可觀。
只要努力學到真東西，前途自然不會差。如果你想學好HTML5開發語言，一般在2w左右，應該根據自己的實際需求去實地看一下，先去試聽之後，再選擇比較適合自己的，希望能給你帶去幫助。

『拾』 怎麼判斷html 是在移動端應用（app）,還是移動端瀏覽器中打開的

判斷html 是在移動端應用（app）,還是移動端瀏覽器中打開可以通過查看UA來實現。