⑴ 移動web和web有哪些區別
移動web和web有哪些區別體現在以下幾點:
1.比如說具體的應用在不同地方的形態。
一款計算器：
web app： 其實就是在網頁上的應用。這個很廣泛，只不過大家平時都不這么叫而已，你在 網頁上使用一款計算器都可以稱作web app。
mobile web app：額，就是能在手機瀏覽器中打開使用的計算器，只不過根據手機的屏幕，調整了 自己的按鍵大小，布局等等。
mobile app： 你在應用商店下載了一個計算器。
2.比如說如何用代碼編寫：
web前端：
基本上就是html+css+javascript。至於html5，css3什麼的就是具體到你應該用什麼規則的代碼去寫了。這個如果樓主想要入門學習的話，推薦w3school 在線教程（中文）。
mobile web 前端：
其實還是那套東西，但是加入了一個叫做響應式設計的東西。而且據我了解，這個概念還要從html 5標準的普及說起，說通俗點就是屏幕多大的時候布局，字體是什麼樣的。網上有很多前端模板都提供了這個功能。比如比較火的Bootstrap中文網（中文）深層次點，比如通過html5的API調用手機的硬體等。
mobile 前端：
這個目前還分兩大陣營，一個是Android，一個是iOS。而且就我的了解，web前端有專門的崗位叫前端攻城師，但是很少聽說過只寫mobile前端的移動工程師，至少我至今沒有聽到過。
Android：
靜態的話就是xml，動態的話就是android的layout那堆東西。
https://developer.android.com/guide/topics/ui/declaring-layout.html(可能需要翻牆)
比較簡單的layout，比如:
Linear Layout(可能需要翻牆)
FrameLayout | Android Developers(可能需要翻牆)，想學習的話可以參考下。
還有一些動畫效果。
https://developer.android.com/guide/topics/graphics/index.htmll(可能需要翻牆)
當然，提到Android的UI，不得不提的是那坑爹的適配。只能說，學習Android UI需謹慎。
iOS：
UIKit那套東西，其實現在感覺如果不是太復雜，.xib直接拖界面也還可以。UIKit Framework Reference 。storyboard就算了，不是太推薦。簡單的頁面還可以，想試也可以試試。反正我用的不是很舒服。當然還有一些動畫效果。Graphics and Animation
3.比如說其他區別：
其實最顯著的區別就是，web app是不依賴於具體的設備的，通用性較強，只要手機或PC有相應內核的瀏覽器就基本OK。而mobile的app則依賴於具體的設備，一旦更換設備，需要重新下載才能繼續使用。
⑵ web UI 和移動UI的區別以及聯系
一、用戶與界面交互/操作的方式不同
Web網站：以滑鼠或觸摸板為媒介，多採用左鍵點擊的操作，也支持滑鼠滑過、滑鼠右鍵的操作方式。
移動App：直接用手指觸控屏幕，除了最通用的點擊操作之外，還支持滑動、捏合等各種復雜的手勢。
設計要點：
1、相比滑鼠，手指觸摸范圍更大，較難精確控制點擊位置，對此iOS人機交互規范中提到手指最合適的觸控區域至少需要44 point。所以移動App的點擊區域要設置的更大一些，不同點擊元素的間隔也不能太近。
2、Web網站支持滑鼠滑過的效果，一些tips提示通常採用滑鼠滑過展開/收起的交互方式。在移動App則不支持這類效果，通暢需要點擊特定的icon來收起/展開提示。
3、移動App支持的豐富的手勢操作，比如通過左滑可看到你可能需要的快捷操作「取消關注」、「刪除」，這類操作方式的特點是快捷高效，但對於初學者來說有一定的學習、獲知成本。我們在合理設計這些快捷操作方式的同時，還需要支持最通用的點擊方式來完成任務的操作路徑。針對手勢操作學習成本高的問題，一些App常通過新手引導的方式來教用戶。
4、移動App以單手操作為主，界面上重要元素需要在用戶單手點擊范圍內，或者提供快捷的手勢操作。
二、設備尺寸不同
Web網站：不同PC的解析度不同，瀏覽器窗口最大化的尺寸也不同；瀏覽器窗口可縮放。
移動App：設備尺寸相對較小；不同設備的解析度差異化較多，特別是Android；支持橫屏、豎屏調轉方向。
設計要點：
1、移動App的尺寸較小，一屏展示的內容有限，更需要明確哪些信息更為重要，有效的「組織」相關聯的內容，優先順序高的內容突出展示、次要內容適當「隱藏」。
2、Web網站因瀏覽器解析度差異較大、且窗口尺寸可變化，設計時需要確定好不同解析度的內容展示和布局，也因為這一點加上webapp的瀏覽需求，近幾年來響應式設計更為普遍。
3、因設備解析度、dpi大小不一，所以移動App在界面布局、圖片、文字的顯示上，要兼顧不同設備的效果，需要設計師與開發共同配合做好適配工作。
4、因移動設備支持橫屏、豎屏展示，所以在設計移動App（比如游戲、視頻播放界面）時，需要考慮用戶是否有「換個方向看看」的需求、哪些情況下切換屏幕方向、如何切換等。
三、使用環境不同
Web網站：通常坐在某個室內、使用時間相對較長；
移動App：既可能是長時間在室內使用、也可能是利用碎片化的時間使用，或站或坐或躺著或行走，姿勢不一；
設計要點：
1、使用Web網站時，用戶更為專注；
2、使用移動App時，用戶很容易被周邊環境所影響，對界面上展示的內容可能沒那麼容易留意到；長時間使用時更適合沉寂式瀏覽，碎片化時間使用時用戶可能沒有足夠的時間、每次瀏覽內容有限，類似「稍候閱讀」、「收藏」等功能則比較實用；用戶在移動過程中更容易誤操作，需要考慮如何防止誤操作、如何從錯誤中恢復。
四、網路環境不同
Web網站：網路相對穩定且基本無需擔心流量問題
移動App：因用戶使用環境復雜，可能在移動過程中從通暢環境到封閉的信號較差的環境，網路可能從有到無、從快到慢；既可使用無需擔心流量的WiFi，也可能使用需要控制流量的3G/4G。
設計要點：
1、移動App，網路異常的情況更普遍，需要更加重視這類場景下的錯誤提示、以及如何從錯誤中恢復的方法。
2、移動App，在3G/4G情況下用戶對流量比較重視，對於需要耗費較多流量的操作，需要提醒用戶，在用戶允許的前提下才繼續進行。
五、通知方式不同
Web網站：對於瀏覽器的通知中心，用戶使用的不多，很難主動喚起用戶
移動App：推送通知給用戶的方式很常見。
設計要點：
1、在移動App可以用通知及時提醒用戶一些重要信息，但也需要考慮用戶關閉通知提醒的場景下用戶仍然能無礙的使用；因為「通知」功能對用戶較為重要，設計師需要思考如何讓用戶更容易「開啟通知許可權」。
六、基於位置服務的精細度不同
Web網站：定位功能一般獲取到的是當前城市
移動App：可較為精確的獲取用戶的當前位置
設計要點：
1、移動App可合理的利用用戶的位置，給用戶提供一些服務。比如，地圖類可以搜索「我的位置」到目的地的路線，生活服務類可以查詢我的位置附近的美食、商場、電影院等等，這樣的方式省去了用戶手動輸入當前位置的復雜、更加智能化。
⑶ 手機移動web開發 如何做到控制頁面大小不變
手機的屏幕有大有小，移動web最好做成響應式布局，也就是自適應屏幕，沒有固定寬高，這樣的話，在所有手機上都可以正常顯示。ico的話可以使用字體圖標，現在大部分手機瀏覽器都支持html5和css3的。
Web前端開發工程師是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過7年。Web前端開發是從網頁製作演變而來的，名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製作是Web 1.0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主。
⑷ 如何做一個移動web頁面，用Jquery Mobile 嗎
方法/步驟1簡單的說明一下JQueryMobile.它是一個很好的跨平台的移動端網站開發框架。是一個前台的框架。現在要使用這個框架組一個界面，這個界面很簡單，但是麻雀雖小五臟俱全，然後模板實現，知識講解完畢。html要使用HTML5的標准來寫，因為JQueryMobile是基於HTML5的。書寫html5的格式如圖，2既然使用JQueryMobile就要有這個框架，這里可以使用本地引用的方式，和網上引用，也叫做cdn引用。就是比較穩定和快速的引用外部文件的一種方式。這里使用cdn的方式，這樣只要可以上網就可以使用該框架。3在寫移動端的網站的時候，一定要寫一個meta的name為viewport的屬性，因為該屬性代表著網站頁面的自適應。簡單的寫法為：代表著網站為驅動設備的寬度。4然後加入框架之後，寫一個簡單的界面。這裡面JQueryMobile大量的使用了一個data-的屬性，這里使用最多的事data-role。代表著他默認的樣式規則。就是提前定義好了很多的樣式來供你使用。常用的page.代表著頁面，listview，代表著一個列表視圖。下面是代碼和效果圖5稍微說明一下。data-role="page"是代表著一個頁面可以看做該內容下是一個頁面顯示的內容data-role=」header"代表著頁面的頁頭，就是頁面的最上面顯示的內容這里需要注意，裡面要加上子標簽內容，要不然，就不會居中顯示內容了。推薦使用h1.data-role="footer"代表著頁腳的內容。也是網站的一個說明信息。或者是一個底部導航菜單。還有一部分，就是data-role="content"是代表著頁面內容部分，主要的內容在這裡面顯示。這3個部分構成了一個簡單的頁面。所以，現在可以體驗到它的強大，不用寫太多的代碼一個簡單的框架就好了，下面繼續增加一個listveiw的列表視圖。6完成列表視圖的代碼，增加一個文章列舉表的代碼，這里列表是使用data-role="listview"來修飾樣式。然後這里只需要加上data-role="listview"你發現想要的list效果就實現了。這樣我們一個簡單的頁面效果就實現了。一個簡單開發例子
⑸ 移動光纖貓 設置 IP web界面
光貓是沒有WEB設置界面的， 只有路由能設置， 光貓只負責光電轉化，其他都得有路由和電腦完成，就是你說的電信的進去，也只是說進入了電信的路由或者伺服器，不是進的光貓1！
⑹ 移動web終端 viewport設置
移動web，顧名思義就是在移動端的web頁面，比如我們可以在手機的UC瀏覽器中訪問淘寶等網站：
可以發現淘寶的移動web版本和pc上web版本有很大的不同，在移動web版本中更像是模擬了native應用中的頁面。所以移動web的開發和pc上web的開發肯定也是有很大的不同。
先看正常的pc上web頁面在移動設備上的展示：
從上圖可以看出，正常PC上的網頁在移動設備被縮放了，這樣對於商城購物類的網站來說，用戶體驗非常差，所以就更應該要有適配移動設備的頁面了。
那麼究竟是怎樣適配移動端的頁面呢？答案就是viewport，可以將viewport理解為瀏覽器中用來承載網頁的那一層。默認情況下移動設備上瀏覽器會自動將viewport的值設置為980px或者1024px，不過手機的屏幕沒有那麼大，這時候網頁就縮放了。
到這里，web適配移動設備的方案就出來，讓viewport=手機的寬度就好了。是的，正常情況下都是這么用的：
在meta標簽中設置viewport的寬度為設備的寬度， initial-scale=1 的意思是頁面的縮放比例為1， user-scalable=no 的意思是禁止用戶縮放頁面， minimum-scale=1,maximum-scale=1 的意思是設置用戶的最大最小縮放比，當設置了 user-scalable=no 之後這兩個屬性值就沒有意義了。
以上就是viewport的主流設置，不錯淘寶（m.taobao.com）就是非主流的設置，淘寶的移動web頁面中viewport沒有設置寬度：
所以淘寶的viewport的width應該是用js動態獲取的。
⑺ 移動端Web頁面適配方案（整理版）
@(概述)[基本概念|百分比|rem|vw/vh|響應式設計]
移動端web頁面的開發，由於手機 屏幕尺寸 、 解析度 不同，或者需要考慮 橫豎屏 問題，為了使得web頁面在不同移動設備上具有相適應的展示效果，需要在開發過程中使用合理的適配方案來解決這個問題。
早期網頁設計採用 靜態布局 ，通過 <meta> 標簽中的 applicable-device 應用設備標識識別移動設備，即 <meta name = 'applicable-device' content = 'mobile'> ，在 <meta> 標簽中的 viewport 標簽中設置 width ，通過 js 動態修改標簽的 initial-scale 使得頁面等比縮放，剛好占滿整個屏幕。一些文章中有提到靜態布局中頁面各個元素採用 px 為單位，這種方案實現簡單，不存在兼容性問題，但用戶體驗很不友好。
後面出現 流式布局 ，使用百分比 % 定義寬度，高度使用 px 固定，根據可視區域大小實時進行尺寸調整，通常使用 max-width/min-width 控制尺寸范圍過大或者過小。這種方案實現比較簡單，但在大屏手機或橫豎屏切換場景下可能會導致頁面元素被拉伸變形，字體大小無法隨屏幕大小發生變化。
順應不同頁面字體大小展現問題，出現了 彈性布局 。這種布局方案下，包裹文字的元素的尺寸採用 em/rem 為單位，頁面主要劃分區域的尺寸依據情況使用 px 、百分數或者 em/rem 。如一些高校的網站 jlu ，頁面的主要劃分區域使用 px 和百分比，包裹文字的元素和文字採用 em 。
上面的這幾種方案下，頁面元素的大小按照屏幕解析度進行適配調整，但是整體布局不變，對於 響應式web設計 ，網頁布局會隨著訪問它的視口及設備的不同呈現不同的樣式，在實現上可能會以上多種方案的結合，同時搭配 媒體查詢 技術使用，使得一個頁面在多個終端 (PC, mobile, pad) 呈現滿意效果，如 mashable 。
[TOC]
像素，是屏幕上顯示數據的最基本的點，表示相對大小。不同解析度下相同長度的 px 元素顯示會不一樣，是因為像素點的個數相同情況下，不同解析度下每個像素點對應的像素寬度不同。比如同樣是 14px 大小的字，在 1366×768 顯示屏下會顯示的小，在 1024×768 顯示屏下會相對大。也稱為 物理像素（設備像素 ），是解析度的尺寸單位。
印刷行業常用單位，能夠使用測量設備測得的長度，等於 1/72 英寸。
在不同屏幕上， css 像素呈現的物理尺寸一致，但 css 像素對應的物理像素具數不同。標準的顯示密度下， 1 個 css 像素對應一個物理像素，縮放時， 1 個 css 像素對應的物理像素會減增。是一種 設備獨立像素(device independent pixels: DIPs)
像素密度，每英寸所擁有的像素數。值越高，顯示畫面細節越豐富。計算公式為： ，其中 和 是解析度的寬高， 是屏幕尺寸。
列印設備每英寸印刷出來的點有多少個，值越高，圖片越細膩。
設備物理像素和設備獨立像素比 ，即 是指在理想布局寬度，使用多少個物理像素來渲染一個css像素。js中通過 window.devicePixelRatio 獲取，css中通過 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 進行媒體查詢。
<meta> 標簽中定義了一些元數據信息，通過設置 <meta name = "viewport"> ，提供有關 視口初始大小 的信息，供 移動設備 使用。屬性值為
移動端涉及 布局視口 （Layout Viewport）、 視覺視口 （Visual ViewPort）和 理想視口 （Ideal ViewPort）。
與移動端web頁面適配有關的手機屏幕特性包括
硬體所支持的，屏幕每行的像素 * 每列的像素點數，單位是 px 。
設備獨立的，軟體可以達到的，個人理解是使得軟體/頁面在不同屏幕上顯示出來的效果一致。
像素解析度 ÷ 邏輯解析度等於 倍率 ，如 @3x 表示解析度的 3 倍。一個已知物理像素大小的元素，如果在普通屏中其設備像素等於 css 像素，但在一些高清屏中，如 Retina 顯示屏，一個css像素對應 2 或 3 個設備像素，這時顯示出來的元素會變小。為了讓元素如期待顯示，需要傳入 原始設計稿尺寸 × 倍率 的設計稿，根據 DPR 的定義，這樣載入後能夠達到同樣的效果。
手機屏幕對角線長度換算成英寸的大小
貼上 源碼 分析
視口 是瀏覽器中用於呈現網頁的區域，移動端的視口通常指的是 布局視口
使用 css 預處理器把設計稿尺寸轉換為 vw 單位，包括 文本 ， 布局高寬 ， 間距 等，使得這些元素能夠隨視口大小自適應調整。以 1080px 設計稿為基準，轉化的計算表示為
響應式設計 使得一個網站同時適配 多種設備 和 多個屏幕 ，讓網站的布局和功能隨用戶的使用環境（屏幕大小、輸出方式、設備/瀏覽器能力而變化），使其視覺合理，交互方式符合習慣。如使得內容區塊可伸縮與自由排布，邊距適應頁面尺寸，圖片適應比例變化，能夠自動隱藏/部分顯示內容，能自動折疊導航和菜單。