整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
超文本標記語言移動站(HTML MOVEL STATION)是指根據你使用的移動終端，適合你的網站類型。你可以把它理解為你電腦網站的移動版本。
你為什么想成為一個移動電話站？
客戶經常會問，他們的手機可以訪問哪些計算機網站，為什么他們需要成為手機網站？智能手機訪問該網站的電腦版沒有問題，但目前仍有大量用戶使用非智能手機。雖然火狐、chrome等瀏覽器也能達到訪問的效果，但呈現的網頁非常凌亂，不能給用戶帶來好的體驗。智能手機也很難通過瀏覽器縮放功能獲得良好的瀏覽體驗，智能手機訪問計算機網頁的速度遠低于訪問移動網頁的速度。在手機互聯網流量昂貴的環境中，手機版本為用戶節省了流量。
HTML5移動站建設的優勢:
1、手機網站擁有良好的移動體驗
當用戶使用移動瀏覽器訪問您的網站時，他不會出現在您的電腦網站上，但會自動檢測到使用該設備后顯示的html移動臺。該網站更加符合移動終端的操作習慣，使用起來更加流暢。
2、手機網站的推廣成本低
推廣一個html移動電話站只需要很少的成本。用戶只要連接到互聯網，就可以掃描代碼或輸入網址來直接訪問體驗。與應用程序相比，應用程序也需要復雜的操作，如下載應用程序，用戶更愿意擁有html的初始試用體驗。
3、手機網站建設速度很快。
超文本標記語言已經存在多年，其發展技術已經成熟，這也為超文本標記語言手機站的發展速度提供了一定的保證。如果開發一個應用需要至少2個月的時間，那么html手機站需要的時間不到一半。
4、手機網站建設成本低
由于成熟的html網站建設技術，這種類型的網站建設成本通常比今年才開始的APP開發成本更便宜、更實惠。
文筆者從實際工作經驗出發，結合參考相關文章，對移動端產品（APP、小程序、H5）從13個方面進行了比較分析，與大家分享。
移動端產品包括小程序（本文特指微信小程序）、APP（安卓、IOS）、H5頁面。其中：
基于工作實際體驗以及參考相關文章（文末有備注參考文章地址），下面將分別從運行環境、系統權限、推廣方式（拉新）、運營手段、支付能力、登錄方式、用戶體驗、抗風險能力（防止被封禁）、訪問入口、開發成本、迭代周期、外部限制、適用情形這13個方面來比較總結移動端產品之間的不同特點。
（1）APP
Android：
轉發推廣海報（嵌套二維碼）到微信好友、朋友圈、QQ空間、QQ好友->二維碼掃碼->打開網頁到應用市場下載；或者生成推廣鏈接發送給好友或朋友圈分享 ->用戶點擊推廣鏈接打開瀏覽器到應用市場下載 。
IOS：
（2）小程序：
（3）H5
（1）APP
（2）小程序：微信內推送服務通知；
（3）H5：郵件、給用戶發送短信。
（1）APP：
（2）小程序：
（3）H5：和APP類似，是在網頁內進行登錄的。
（1）APP
（2）小程序：多上線幾個小程序；
（3）H5：多準備幾個域名。
（1）APP
（2）小程序
（3）H5
（1）APP：需要分別上架安卓應用市場和蘋果APP store，同時需要提交許多審核資料，流程繁瑣，審核時間也很長。
附二者應用市場審核區別：
附IOS上線APP方式： IOS上線需要擁有蘋果公司的開發者帳號，分成兩類：
其中，個人開發者帳號開發的APP，需經蘋果商店，才能下載安裝；而企業開發者帳號開發的APP，只能自建發布網站，用戶到網站上下載。
（2）小程序：小程序上線需要提交微信審核，第一次審核（小程序審核官方給的時間期限為7個工作日以內給出審核結果）會慢些。
（3）H5：隨時上線，線上可以實時看到修改情況，因此比較靈活迭代，不受審核的限制。
（1）APP：依賴安卓和IOS系統提供的能力，不過這些操作系統大多穩定，外部限制較少。
（2）小程序：
（3）H5：限制最小，基本上只要生成個可以用的鏈接，就可以在各種平臺上查看了。
（1）APP：
（2）小程序
（3）H5
如文章有欠妥之處，歡迎各位方家批評指正。
http://www.woshipm.com/pd/1315132.html
本文由 @初出茅廬 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
解移動端頁面與PC端頁面開發的區別，學習移動端頁面的開發流程。
視口
視口是移動設備上用來顯示網頁的區域，一般會比移動設備可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的后果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，可以用 meta 標簽，name=“viewport ” 來設置視口的大小，將視口的大小設置為和移動設備可視區一樣的大小。
設置方法如下( 快捷方式：meta:vp + tab )：
<head> ...... <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ...... </head>
pc端與移動端渲染網頁過程：
視網膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解為屏幕上的一個發光點，無數發光的點組成的屏幕，視網膜屏幕比一般屏幕的物理像素點更小，常見有2倍的視網膜屏幕和3倍的視網膜屏幕，2倍的視網膜屏幕，它的物理像素點大小是一般屏幕的1/4,3倍的視網膜屏幕，它的物理像素點大小是一般屏幕的1/9。
圖像在視網膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由于視網膜屏幕的物理像素點比一般的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，為了解決這個問題，可以使用比原來大一倍的圖像，然后用css樣式強制把圖像的尺寸設為原來圖像尺寸的大小，就可以解決模糊的問題。
清晰度解決過程示意圖：
背景圖強制改變大小，可以使用background新屬性
background新屬性
background-size:
length：用長度值指定背景圖像大小。不允許負值。
percentage：用百分比指定背景圖像大小。不允許負值。
auto：背景圖像的真實大小。
cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
PC及移動端頁面適配方法
設備屏幕有多種不同的分辨率，頁面適配方案有如下幾種：
1、全適配：響應式布局+流體布局
2、移動端適配：
流體布局+少量響應式
基于rem的布局
流體布局
流體布局，就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體布局中，元素的邊線無法用百分比，可以使用樣式中的計算函數 calc() 來設置寬度，或者使用 box-sizing 屬性將盒子設置為從邊線計算盒子尺寸。
calc()
可以通過計算的方式給元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
1、content-box 默認的盒子尺寸計算方式
2、border-box 置盒子的尺寸計算方式為從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內
響應式布局
響應式布局就是使用媒體查詢的方式，通過查詢瀏覽器寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的布局方式，從而實現響應式布局。響應式布局的頁面可以適配多種終端屏幕（pc、平板、手機）。
相應布局的偽代碼如下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
基于rem的布局
首先了解em單位，em單位是參照元素自身的文字大小來設置尺寸，rem指的是參照根節點的文字大小，根節點指的是html標簽，設置html標簽的文字大小，其他的元素相關尺寸設置用rem，這樣，所有元素都有了統一的參照標準，改變html文字的大小，就會改變所有元素用rem設置的尺寸大小。
cssrem安裝
cssrem插件可以動態地將px尺寸換算成rem尺寸
下載本項目，比如：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime Text -> Preferences -> Browse Packages… 復制下載的cssrem目錄到剛才的packges目錄里。 重啟Sublime Text。
配置參數 參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉rem的單位比例，默認為40。 max_rem_fraction_length - px轉rem的小數部分的最大長度。默認為6。 available_file_types - 啟用此插件的文件類型。默認為：[".css", “.less”, “.sass”]。
1、結合流體布局和響應式布局制作天天生鮮移動端首頁頁面
2、使用基于rem的布局方式制作天天生鮮移動端首頁頁面
天天生鮮首頁效果圖如下：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
