如何在不同設備上呈現同樣的網頁

A. 同一個網址在手機和電腦打開的時候不一樣，怎麼實現的

無論是手機還是電腦，瀏覽器訪問網址時，客戶端和服務端交互是基於http協議。

客戶端向服務端發起訪問請求時，http請求頭部里會帶一個叫做User-Agent的屬性。服務端程序可以通過這個屬性來識別是什麼終端訪問的。使用重定向，或者伺服器內部跳轉讓手機和電腦收到的數據不同。

展示不同的內容，一般是通過伺服器後端代碼處理。通過重定向的方式實現的話，可以用js實現。

比如網路貼吧，同樣的地址，手機和pc返回的一個是wap頁面，一個是html網頁。

(1)如何在不同設備上呈現同樣的網頁擴展閱讀

User Agent中文名為用戶代理，簡稱 UA，它是一個特殊字元串頭，使得伺服器能夠識別客戶使用的操作系統及版本、CPU 類型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等。

一些網站常常通過判斷 UA 來給不同的操作系統、不同的瀏覽器發送不同的頁面，因此可能造成某些頁面無法在某個瀏覽器中正常顯示，但通過偽裝 UA 可以繞過檢測。

UA的標准格式為：瀏覽器標識 (操作系統標識; 加密等級標識; 瀏覽器語言) 渲染引擎標識 版本信息

B. 如何在手機上瀏覽網頁和電腦版的一樣，而不是移動版

是你的顯卡的事情吧，我也遇到過這種問題，可能你的驅動不支持現在的顯卡。
打開「我的電腦」-屬性-硬體-設備管理器-顯卡-驅動程序-返回驅動程序。
你試試吧，祝好運

C. 如何高效快速的開發多終端自適應網頁

都是灌水回答 ....
如何高效，其實要高效就是利用框架了。如果手寫要想高效的話，還是熟練度的問題。可以讓設計幫你切圖，你只管寫頁面，這樣也高效，畢竟減少了切圖的時間

D. 在區域網內如何在一台電腦上顯示另一台電腦上的網頁

有很多種方法：
1、遠程桌面，但是另一台顯示後，原來那台會退出桌面到登錄界面，一旦登錄，另一台會被踢出去，無法觀看；
2、使用QQ遠程協助、windows遠程協助工具，第三方遠程桌面工具例如teamview等；
3、使用黑客軟體，監視另一台計算機顯示的內容；
4、如果一台計算機當作伺服器，讓另一台計算機連接後打開伺服器上的網站網頁，那麼那台計算機上必須安裝IIS或者apache等web服務軟體；
5、如果是靜態軟體，只要一台計算機將文件共享，另一台計算機通過區域網共享文件夾，就能訪問了。

E. 自適應網頁設計怎麼製作

隨著越來越多的人使用手機上網，使自適應網頁設計技術變得越來越流行。自適應網頁設計指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。當然，對一個新手來說可能聽起來有點復雜，其實它比你想像的簡單多了（前提你有css基礎）。
1、在HTML頭部增加viewport標簽。
在網站HTML文件的開頭，增加viewport meta標簽告訴瀏覽器視口寬度等於設備屏幕寬度，且不進行初始縮放。代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低於IE8的瀏覽器。
IE8及其更低版本不支持media query，可以使用 media-queries.js或 respond.js腳本實現支持。

2、在CSS文件尾部增加針對不同屏幕解析度的規則。
例如使用如下的代碼，可以讓屏幕寬度低於480像素的設備（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。以下代碼針對Z-Blog，WordPress相關標簽名稱只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float:none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局寬度使用相對寬度。
網頁總體框架可以使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不同解析度進行修改就方便。當然也可以不用相對寬度，那就需要在 @media screen and (max-device-width: 480px) 裡面增加各個div的針對小屏幕的寬度，實際上更麻煩。
4、頁面使用相對字體（非必要）
在HTML頁面上不要使用絕對字體（px），而要使用相對字體（em），對於大多數瀏覽器來說，通常用 em = px/16 換算，例如16px就等於1em。
5、圖片自適應（非必要）
img標簽的話，只需要設置 max-width:100%;或width:100%;語句為：img { max-width:98%;}
css載入的background-image如何自適應大小呢，其實CSS3中是可以實現的，添加如下語句：background-size:100% 100%;

F. mac瀏覽器怎麼在不同設備同步網頁

用Safari瀏覽器，並統一帳號。

G. 如何去設計一個自適應的網頁設計或html5

一、自適應網頁設計
自從2010年，Ethan Marcotte提出了 「自適應網頁設計」（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。
他製作了一個 範例，裡面是《福爾摩斯歷險記》六個主人公的頭像。如果屏幕寬度大於1300像素，則6張圖片並排在一行。
如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。
如果屏幕寬度在400像素到600像素之間，則導航欄移到網頁頭部。
如果屏幕寬度在400像素以下，則6張圖片分成三行。
mediaqueri.es上面有更多這樣的例子。
這里還有一個 測試小工具，可以在一張網頁上，同時顯示不同解析度屏幕的測試效果，我推薦安裝。
二、需要允許網頁寬度自動調整
「自適應網頁設計」到底是怎麼做到的，其實並不難。
首先，在網頁代碼的頭部，加入一行 viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。
三、在進行設計的時候不能使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
具體說，CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
四、相對大小的字體
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
五、流動布局（fluid grid）或瀑布流
「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
另外，絕對定位（position: absolute）的使用，也要非常小心。
六、選擇性載入CSS
「自適應網頁設計」的核心，就是CSS3引入的 Media Query模塊。
它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就載入tinyScreen.css文件。
如果屏幕寬度在400像素到600像素之間，則載入smallScreen.css文件。
除了用html標簽載入CSS文件，還可以在現有CSS文件中載入。
@import url(「tinyScreen.css」) screen and (max-device-width: 400px);
七、CSS的@media規則
同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
八、圖片的自適應（fluid image）
除了布局和文本，」自適應網頁設計」還必須實現圖片的 自動縮放。
這只要一行CSS代碼：
img { max-width: 100%;}
這行代碼對於大多數嵌入網頁的視頻也有效，所以可以寫成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好寫成：
img { width: 100%; }
此外，windows平台縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的 專有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的 imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById(「content」).getElementsByTagName(「img」);
imgSizer.collate(imgs);
});
不過，有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有 很多方法可以做到這一條，伺服器端和客戶端都可以實現。
只要遵循這8條設計准則，我相信你們可以很快的設計出自適應的網頁出來。