整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
最近在一直在搞M站，也就是移動web站點。由于是第一次，也遇到了很多問題，所以把最近了解到的東西總結總結。聊一聊什么是移動M站，它有啥作用和優勢。
也有人會問，M站和APP有什么不同？
1. APP 直接在用戶的移動設備上，曝光率相對較高。 而M站需打開瀏覽器，輸入地址才能訪問，所以曝光率相對較低。
2. M站的推廣的渠道相比移動APP，渠道較多，方便追蹤用戶來源，流量入口等，方便以后的活動推廣和數據分析。
3. M站用戶無需安裝，輸入URL即可訪問，而APP需要下載安裝。
4. M站能夠快速的通過數據分析，能快速得到用戶的反饋，從而更容易根據統計數據分析和用戶的需求來調整產品。
5. APP對用戶更具粘性，用戶體驗也更好。
6. M站對于營銷推廣活動非常方便，轉發分享方便快捷。
7. M站更新迭代產品速度，響應產品調整非常快，隨時發布，而App需要審核時間。
8. M站跨平臺，無需開發安卓和iOS版，只需有瀏覽器即可。
所以， 我覺得，M站和客戶端的是相輔相成的，M站的及時性和快捷性，是app無法比擬的。而app 的用戶體驗，則是M站無法做到的。目前來說兩者是不可能被對方完全替代的，在互聯網營銷大行其道的今天，M站也越來越重要。營銷活動大多以H5頁面的形式展示和傳播的。通過M站的營銷和推廣，從而又促進APP的使用和推廣。
目前，移動M站有輕APP 化的是趨勢。M站會越來越像個APP，使得M站也越來越重要。而且，很多APP的展示效果。原生代碼無法實現的時候，嵌套移動H5頁面也是一個很好的選擇。
下面介紹幾個移動M站建設的幾個點：
1. 51Degree
51degrees 號稱是目前最快、最準確的設備檢測的解決方案。它是一個免費開源的.NET移動應用開發組件，可以用來檢測移動設備和瀏覽器，甚至可以獲取屏幕尺寸，輸入法，加上制造商和型號信息等。從而可以選擇性地被重定向到為移動設備而設計的內容。由于擁有精確的移動設備的數據，所以幾乎支持所有的智能手機，平板電腦等移動設備。
其實說白了，51Degree的作用，就是識別客戶端的設備。PC瀏覽器訪問，就跳轉到PC站，手機瀏覽器訪問就跳轉到M站。從而達到更好的用戶體驗。
如何將51Degree加入到現有網站？
http://51degrees.codeplex.com/wikipage?title=Enhance%20existing%20web%20site
2. 架構
其實移動web和傳統的web并沒有本質的區別。說白了還是一個web 站點，使用的技術都是html+css+js。不同的是，只不過目前在 Html5的大趨勢下，將Html5加入到了移動M站，使得M站更像個輕APP。
3. Bootstrap
Bootstrap。就不多說了，網上很多Bootstrap的資料。它最大的優勢應該就是非常流行，非常容易上手，如果缺少專業的設計或美工，那么Bootstrap 是一個比較好的選擇。它的用法及其簡單,幾乎沒什么學習成本,絕對是快速開發的利器。
官網：http://getbootstrap.com/ Github：https://github.com/twbs/bootstrap/
4. 幾點建議：
1.移動m站的URL盡量和pc相同，這是為了避免同一URL在pc站可以顯示，但是在手機上打開卻是404；
2. M站寫單獨的TDK。
電商系列（四）基于共享存儲的圖片服務器架構！
電商系列（三）如何構建數據庫的主從架構！
電商系列（二）聊一聊服務器日志與監控系統的解決方案
電商系列（一）中小型電商系統的基礎架構！
SpringBoot入門系列（十一）實現統一異常處理，就這么簡單！
Spring Boot整合定時任務Task，一秒搞定定時任務
Spring Boot入門系列（十）如何使用攔截器，一學就會！
Spring Boot入門系列（六）Spring整合Mybatis詳解「附詳細步驟」
者：日照工校/徐鵬
手機瀏覽器能用來干什么？看資訊、看圖片、看小說、看視頻等等。作為上網必備工具，手機瀏覽器對于網絡體驗的影響不可忽視。隨著網絡的快速發展，大家對于瀏覽器的要求也越來越高，比如支持HTML5頁面版。由于手機瀏覽器的內核和性能存在差異，造成不同的HTML5頁面瀏覽有不同的體驗。
近日無意中看到一個款800手機瀏覽器，在體驗過程中，發現不論是在游戲體驗還是軟件特效上，都完全體現HTML5效果，為了讓大家有更直觀的感受，就先試用了一番。
小知識：
HTML5名詞解釋：原生支持多媒體功能，不再依賴瀏覽器插件（例如 Adobe Flash player， Windows Media Player），便可實現跨平臺在線影音播放。同時 HTML5 還可以讓網頁調用手機的應用數據從而實現很酷的功能。另外，HTML5 新增了離線存儲，一次聯網加載資源，長久離線訪問。廣義的 HTML5 技術還包括 CSS3，JavaScript 以及支持 SVG 等。
在試用過程中，首先引起筆者注意的，還是800手機瀏覽器的界面化，所謂細節決定產品的成敗，先來看看它的到底是什么樣子。
800手機瀏覽器啟動后，從整體上看到的，就是集成了常用的搜索引擎和常用網站，而且還可以添加新的常用頁面。
跑分測試
800手機瀏覽器主要是面向智能手機的安卓瀏覽器，全面支持 HTML5。但是如果要成為一款真正的支持HTML5的手機瀏覽器，僅有支持還是不夠的，更多的需要完全與HTML5的融合，還是先看看它的跑分結果吧：
注：測試網站Html5test.com，它是一個非常具有權威性的測試HTML5性能的網站，無論是PC端還是手機端的瀏覽器，都能夠快速檢測出當前瀏覽器對HTML5頁面各項元素對于HMTL5的支持情況。
在HTML5 測試中，800手機瀏覽器得分高達驚人466分，800手機瀏覽器的得分完全可以媲美PC端瀏覽器的表現，這也大大提升了它對HTML5特效效果以及游戲的支持。
跑分測試結果已經可以說明一個很重要的方面，當然除這些數據外，本身具有HTML5的特性也是非常重要的，800手機瀏覽器還給我們很多HTML5體驗，展現了一種對于HMTL5的一種融合以及更深的理解。
視頻播放
提起HTML5，很多人都會想到視頻播放。因為它完全不需要任何的插件支持，只要是瀏覽器支持即可，目前主流的視頻網站都早已經實現，他們完全支持HTML5的視頻直接播放。目前雖然還支持Flash插件，但是它會大大的增加電量消耗和性能的損耗，同時Adobe公司也宣布會停止Flash在手機端的更新。
現在，來看看800手機瀏覽器對于視頻的表現：
HTML5視頻體驗網站截圖
逼真的靈動效果，完全沒有卡頓的現象
800手機瀏覽器在播放過程中沒有出現視頻失真或者不流暢的情況。
CCS3特性
除此之外，800手機瀏覽器還展示了幾種HTML5獨有特性，比較代表性的有CSS特性等。
CCS3是CSS語言的新版，也是一個全新時代的技術，它可以給你的圖片添加圓角，可以讓你的圖片具有陰影特效，還可以打造一個矢量圖的效果。
游戲體驗
800手機瀏覽器不僅僅帶來了一些軟件上的體驗，還給我們的帶來了很多游戲上的體驗，來看看800手機瀏覽器的游戲效果如何吧。
這款游戲屬于一個網絡游戲，支持觸摸反饋，在試玩過程中，游戲的流暢度和直接下載游戲沒有太大的差別。
總結：
800手機瀏覽器在HMTL5上表現無懈可擊，給我留下很深刻的印象。它不僅僅表現在跑分測試數據上，更多的是表現在對于HTML5的融合上，是一款真正的HTML5瀏覽器。
前端開發這個行業發展飛速，特別是即將普遍的HTML5，本文將由廣州中星信息老師整理HTML5的基本使用。
1.small重新定義
不久前，我使用了<small>標簽來創建與logo相關的副標題。但是在HTML5中重新定義了<small>標簽，使之更能表現語義化，在<small>的字號都會變小，想想如果這個標簽用于網站的底部的版權信息還是個不錯的做法。
2. 去掉了javascript和CSS標簽的type屬性
在HTML5中，不再需要type屬性了，因為這顯得有點多余，去掉之后可以讓代碼更為簡潔。
<link href="path/to/stylesheet.css">
3.
5不支持<big>
<b>加粗
<em>加重
<i>斜體
<small>小號字
<strong>加重
<sub>上標
<sup>下標
<ins>插入
<des>刪除
第三課：
三種樣式表插入方法：
外部樣式表：<link rel="stylesheet" type="text/css" href="">
內部樣式表：<style type="text/css"> body{} </style>
內聯樣式表：<p style="color:green"></p>
第四課：HTML鏈接：
鏈接數據：
文本鏈接
圖片鏈接
屬性：
href屬性：指向另一個文檔的鏈接
name屬性 文檔內鏈接
img標簽屬性
alt屬性 圖片出現異常 替換文本屬性
width
height
4.
Html5 手機網站 input 設置為type=number 的問題
h5網頁input 的type設置為number一般會產生三個問題，一個問題是maxlength屬性不好用了。另外一個是form提交的時候，默認給取整了。三是部分安卓手機出現樣式問題。
問題一的解決辦法：
<input name="" type="number" oninput="checkTextLength(this,11)"/>
問題二，是因為form提交默認做了表單驗證，step默認是1,要設置step屬性，假如保留2位小數，寫法如下：
<input name="" type="number" step="0.01" min="1" />
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
