怎麼引用設備屏幕寬度
⑴ js 中怎麼獲取當前屏幕的寬度
document.documentElement.clientWidth 這個方法返來回頁源面在當前窗口中可見部分的寬度(不包括滾動條寬度)；
window.innerWidth 這個方法返回頁面在當前窗口中可見部分寬度(包括滾動條寬度);
window.outerWidth 返回瀏覽器窗口自身寬度，包括菜單和邊框；
screen.width 返回設備的(屏幕寬度)
⑵ html頁面怎樣能夠自適應電腦屏幕寬度
在1024*768或者800*600的解析度下可以自動調整成適用於該客戶端解析度的大小。
第一種方法：做一個網頁解決問題（長了點）
如果只是因為瀏覽者改變了瀏覽器的設置，或者因為瀏覽器不兼容，使自己精心製作的網頁變得"面目全非"，那多令人沮喪！下面我們以網頁愛好者的常用工具Dreamweaver（以下簡稱DW）為例，列出幾個網頁製作初學者較常見的網頁布局問題以及解決方法，希望對初學者們有所幫助。
一、消除任意縮放瀏覽器窗口對網頁的影響
一番辛苦做出來的網頁，在全屏狀態下瀏覽一切正常。但在改變瀏覽窗口大小之後，網頁就變得"不堪入目"了，這是個很值得注意的問題。
問題的根源還得從網頁的布局說起，在DW中，網頁內容的定位一般是通過表格來實現的，解決表格的問題也就成功了大半。
大家應該注意到，在DW中表格屬性面板的高寬設定選擇上提供了兩種不同類型：百分比和像素值。百分比的使用將會產生前面說到的那個毛病。這里所說的百分比是指表格的高或寬設置為上層標記所佔區域高或寬的百分比，如在一個表格單元的寬度是600，在它裡面嵌入了另外一個表格，表格寬度占表格單元的50%，則這個表格的寬度為300，依此類推，如果在一個表格不是嵌於另一個表格單元中，則其百分比是相對於當時窗口的寬度的。IE瀏覽器中，隨便改動主頁窗口的大小時，表格的內容也隨之錯位、變形，就是因為表格的百分比也要隨著窗口的大小而改變成相應的百分比寬度。
自然，解決這個問題的辦法就是將表格寬度設置成固定寬度（也就是像素值）。另外如果外層表格已做好固定寬度設置，內層表格也可以適當使用百分比設置。清楚這個原則以後，如果出現類似的問題大家也知道怎麼解決。
二、讓網頁居中
說到了窗口大小就會順著路子想到解析度的問題，在800×600解析度下製作的網頁在1024×768解析度的機器上打開，整個網頁就會跑到左邊；1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做一個吧？做起來費時，看起來也費勁。怎麼辦呢？
現在大多數網民都還在用800*600的解析度，所以我們一般可以以此解析度為主，要想讓網頁在1024*768時居中，只要在網頁原代碼的<body>後緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下，第一個就是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設的是百分比，那麼使用大於800×600的像素時，網頁就會拉寬，這樣網頁可能會變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種情況下，800×600支持的表格寬度為780像素時不會出現滾動條。還有一點要注意的是不能用DW中的層來定位。
<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>
三、定義固定大小的文字
大家都知道,在IE瀏覽器的功能設置中，有一個可以自由設置窗口內容字體大小的功能，這樣由於不同訪問者的設置習慣不同，呈現在他們面前的網頁有時也會不不相同。比如你可能本來設計時用的是2號字體，結果由於用戶對瀏覽器的額外設定，變的更大了，這時你的網頁也可能變得"不堪入目"。雖然不是你的錯，但客戶是上帝。
如果使用了網頁中的CSS樣式表技術，就不會出現上述情況了。使用快捷鍵"Shift+F11"打開樣式表"CSS style"編輯器，在窗口中單擊滑鼠右鍵執行"New CSS style..."命令新建一個樣式表，然後在給出的列表中選擇"類型"選項，定義文字屬性參數（一般文字的大小選擇12px較為適宜）。完成後選擇網頁編輯窗中的文本，單擊新的樣式表名稱，可以看到選中的文本發生了變化。預覽時試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。
四、讓網頁適應不同的瀏覽器
瀏覽器的格局現在是兩分天下，一分是IE，另一分是NetScape，在國內Ie有絕對的佔有率，在這種情況下我們設計的網頁只要兼容它就行了，但NetScape在國外還是有很多人使用，畢竟它是瀏覽器的元老。
雖然沒有辦法做出讓所有瀏覽器都兼容的網站，但只要注意以下幾點，做出來的網頁在各個瀏覽器都中能達到比較好的顯示效果：
不要混合使用層和表格排版，如果是父子關系，如層中表格，不在此原則范圍內。
內聯式的 CSS 在 Netscape Navigator 中經常會出現問題，使用鏈式或內嵌式。
有時需要在空層插入表格或者透明圖片，以保證在 Netscape Navigator 里的效果。
對於只有幾個像素寬度或高度的層，改用圖片來實現。
避免使用 W3C 組織不推薦的排版屬性，用 CSS 代替。
第二種方法：做兩個適合不同解析度的頁面，一個是800×600，一個是1024×768，在800×600的頁面中加入一下代碼就可以實現跳轉了：
解決解析度問題在Dreamweaver中沒有此項功能，我們只能手動加入一段Javascript代碼。首先在change－ie.html或change－nc.html頁面代碼中的< head>和< /head>中加入以下代碼：
< script language=JavaScript>
< !－－
function redirectPage(){
var url800x600=〃index－ie.html〃; //定義兩個頁面，此處假設index－ex.html和1024－ie.html同change－ie.html在同一個目錄下
var url1024x768=〃1024－ie.html〃;
if ((screen.width==800) ＆＆ (screen.height==600))//在此處添加screen.width、screen.height的值可以檢測更多的解析度
window.location.href= url800x600;
else if ((screen.width==1024) ＆＆ (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
}
// －－>
< /script>
然後再在< body…>內加入onLoad=〃redirectPage()〃
最後，同樣地，在< body>和< /body>之間加入以下代碼來顯示網頁的工作信息：
< script language=JavaScript>
< !－－
var w=screen.width
var h=screen.height
document.write(〃系統已檢測到您的解析度為:〃);
document.write(〃< font size=3 color=red>〃);
document.write(w＋〃×〃＋h);
document.write(〃< /font>〃);
document.write(〃正在進入頁面轉換,請稍候…〃);
// －－>
< /script>
判斷讀者瀏覽器類型和屏幕解析度，自動調用不同CSS
我們在設計網頁的時候一個比較頭痛的問題是究竟我們的瀏覽者的解析度是多少？如果使我們的瀏覽者能夠更好的去瀏覽到我的網頁，這個是我們設計前必須思考的問題。所以Leying在設計網頁的時候第一個想的是兼容現在大多數瀏覽者的屏幕解析度，這里頭有幾種最常用的方法：
1、硬行把網頁先用表格框起來，框的解析度應該是在760－780象素，其餘的空間可以給一個背景圖或者空白.
2、用自動縮放的方法也可以實現，這種方法比較古老，而且很簡單，這個不多說了；
3、用自動判斷的方法。
今天，就第三種方法來說說，如何來判斷出瀏覽者的屏幕解析度，根據不同的解析度給予讀者不同的瀏覽內容：
網路上也有一些能自動判斷出你的瀏覽器是什麼類型或者什麼版本的代碼，集成過來。
一、既判斷解析度，也判斷瀏覽器，使之成為判斷瀏覽器類型屏幕解析度自動調用不同CSS的代碼。
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果瀏覽器為Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
//如果瀏覽器為其他
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</SCRIPT>
為了大家明白，這里簡單解析一下：
引用內容
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
引號裡面分別填寫，用戶使用IE的時候並且解析度為1024*768,800*600,1152*864要使用的css文件名。
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
引號裡面分別填寫，用戶使用FireFox（一個也很流行的瀏覽器）的時候並且解析度為1024*768,800*600,1152*864要使用的css文件名。
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
引號裡面分別填寫，用戶使用其他瀏覽器的時候並且解析度為1024*768,800*600,1152*864要使用的css文件名。
二、不判斷解析度，只判斷瀏覽器實現根據瀏覽器類型自動調用不同CSS。
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
//如果瀏覽器為IE
setActiveStyleSheet("default.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果瀏覽器為Firefox
setActiveStyleSheet("default2.css");
}else{
//如果瀏覽器為其他
setActiveStyleSheet("newsky.css");
}
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</SCRIPT>
解釋：（和前面的差不多）
如果瀏覽器為IE，則調用default.css
如果瀏覽器為Firefox，則調用default2.css
如果瀏覽器為其他，則調用newsky.css
使用方法：
很簡單，放在 「</head>」 前面即可。
頁面在不同屏幕解析度下存在的問題及解決辦法
（未考慮800*600或更低解析度的情況）
一 問題
在不同解析度下，頁面布局存在不同程度的差異，特別是頁面上的表單控制項，其寬度默認是固定值「width:150px」，當解析度較高時，表格中的空白顯得過多，頁面布局顯得很不協調，在寬屏顯示器上尤為明顯。
二 解決辦法
方法1. 為不同解析度單獨做樣式文件，在頁面頭部用js判斷解析度後動態載入定義好的樣式文件。樣式文件命名格式如：forms[_屏幕寬度].css，樣式文件中只需重新定義文本框和下拉框的寬度即可。
在包含的頭文件headr.inc中加入js代碼：
if(screen.width > 1024){
document.write('<link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/css/forms_'+ screen.width +'.css">');
}
forms_1280.css文件內容：
/* 解析度寬度為1280的時候，文本框和下拉框的寬度屬性(width)單獨定義
* 參考計算方法為：（解析度寬度-174）/4 * 0.7
* 左側菜單欄寬度為174px；右側頁面表格是4列；控制項寬度為單元格的70%
* (1280-174)/4*0.7 = 193
*/
input.text
{
background:#FFFFFF;
border:1px solid #B5B8C8;
padding:3px 3px;
height:22px;
line-height:18px;
vertical-align:middle;
padding-bottom:0pt;
padding-top:2px;
width: 193px;
color: #333;
}
select.select{
width: 193px;
}
優點：實現很簡單，代碼量少；並且可針對不同解析度做更細粒度的頁面控制。
缺點：無明顯缺點。
方法2 將整個頁面的寬度設置為固定值，並使其居中顯示。
優點：可以很大程度的消除不同解析度下的顯示差異。
缺點：解析度寬度大於這個固定值的時候，頁面兩邊會出現空白。
方法3 用js判斷解析度，修改body的zoom屬性（IE特性），即可實現對整個頁面進行縮放，類似IE8或其它瀏覽器提供的縮放功能。
優點：實現簡單，頁面能進行縮放。
缺點：縮放是寬度和高度的等比縮放，高解析度下字體、圖片看起來會變小，問題解決的不徹底。
三 總結
推薦方法1。頁面布局的變化和解析度的寬度有密切關系，和高度關系不大；常用的解析度寬度也就幾種，做幾個簡單的css文件即可。
⑶ web網站怎麼獲取訪問的移動設備的屏幕大小
相比較桌面端，用戶越來越多的從移動設備端訪問網頁，這已經不是什麼新鮮事。然而開發者還是需要努力去讓網站更好的適應現在的移動設備，與此同時，從谷歌最近宣布的消息可以看出，它可能會懲罰那些不能為移動設備用戶提供良好用戶體驗的網站，這也迫使開發者努力做好這方面事宜。本文介紹了一些技巧可以幫助你更好的提供良好的移動用戶體驗。 以下為譯文： 最近，谷歌員工暗示，不能提供友好用戶體驗的網站將受到來自谷歌搜索通信量的懲罰，谷歌在最近幾年已經介紹了多個演算法的變化，傷害了許多網站的流量。 不過谷歌的懲罰不應該是你努力使網站友好的主要動機，你的主要動機應該是為你的用戶提供他們想要的東西，為他們提供最好的用戶體驗。所以確保你的網站友好的對象是移動用戶，而不是谷歌。 選擇一個移動方案，著眼於更好的滿足網站用戶的需求 這里主要有四個方法可以為用戶提供更好的移動用戶體驗： 1. 創建一個單獨的手機網站 如果你想提供一個不同於桌面網站用戶體驗的移動用戶體驗，創建一個單獨的網站，讓移動用戶只有一個選擇。 這個解決方案可能在某些情況下有意義，但是由於其過程類似於建立一個全新的網站，因此許多Web開發者都避免這種方法。 由於谷歌認為這樣的移動用戶網站是不同於桌面網站的另一個網站，所以你應該在桌面網站設置一個rel=alternate鏈接tag，類似於： 而在移動網站頁面應包含rel=canonical鏈接tags，類似於： 2. 動態服務 移動和桌面網站不同URL的存在可能會給用戶造成一些混淆。另一方面，僅從屏幕寬度來判斷用戶設備是否是移動設備並不是一個可靠的方法。 因此你或許可以考慮動態服務，它可以用相同的URL服務於移動和桌面網站，只需根據用戶設備提供不同的HTML。 這種方法有點復雜，因為你需要有能力檢測用戶所使用設備的類型，如User-Agent(瀏覽器向伺服器發送的數據頭)。你可以在PHP中實現它(variable $_SERVER['HTTP_USER_AGENT'])，然後你需要查詢資料庫來確定設備尺寸，以此來計算設備是否是一個小屏幕。 當你通過相同的URL為不同的設備提供不同的HTML時，你還需要發送HTTP Vary響應，讓谷歌機器人知道你依賴用戶設備的網站，其工作是不同的，你可以使用下面的方法實現： Header('Vary: User-Agent'); ?> 3. 響應Web頁面 響應Web頁面是指頁面在Web頁面尺寸中適應性的調整變化。這意味著，如果Web頁面改變其尺寸，使用相同HTML代碼的頁面布局將在某種程度下適應本身。 在實踐中，不僅不同尺寸屏幕上出現的頁面緯度不同，而且這些頁面也需要適應設備方向的變化。比如說，當用戶旋轉設備的時候，如果開啟了重力感應，其頁面也會隨之改變。因為屏幕的寬度和高度發生了改變。 這種方法被稱為響應，因為它使用相同的HMTL動態的適應屏幕的變化，所以它非常的靈活。這種響應通常是使用CSS media查詢來實現，這里有個示例： .c640 { display: block; } @media (max-width: 640px) { .c640 { display: none; } } 4. 移動應用 這種方法可以說是一種互補的解決方案，它包含在可以安裝在用戶設備上的移動應用中，有利用本地設備的能力。而且有些原生功能，用戶無法通過訪問你的網站來獲得，例如向他們的設備發送一些推送通知等。 十個網站響應的技巧 1. 從網站訪問次數最多的頁面開始 如果你使用的是類似Wordpress這樣的常見內容管理系統，你的工作將簡單很多，因為你只需要通過一個響應站點更換主題即可。 如果你有一個基於定製開發的網站，比如說是PHP類的情況下，你將需要為適應移動用戶做一些定製開發。 如果你有一個擁有上千頁面的大網站，還要適應PHP類。你的工作將是巨大的，可能需要數月時間才能完成。因此你需要為這些影響更多用戶的頁面制定一個標准。 在PHP類網站的情況下，很容易確定影響更多用戶的頁面是發布於網站上的包，因為它們獲得更多的訪問量。除此之外，其他被訪問最多的網頁類型就不是很明確了。 因此你需要考慮站點谷歌分析報告，如果你擔心谷歌啟動演算法更新，處罰非移動友好站點，那麼最好看一下網站管理員工具報告，特別是Search Queries和Top Pages。 你可以使用PHP網站管理員工具API類來提取你所需要的頁面報告。 2. 使用瀏覽器開發者工具在小屏幕上預覽你的頁面 一旦你找到了首要處理的頁面，你需要掌控目前可能出現的問題，防止它們呈現在移動設備的屏幕上。 現在的瀏覽器(如Chrome)會提供工具，可以上你在不同的屏幕尺寸上預覽頁面。 3. 使視窗適應屏幕尺寸 在這一點中，你首先要做的事是定義一個可以根據屏幕尺寸調整的視窗。(視窗是指一個頁面的可見部分)，如果一個頁面太大，不適應當前的屏幕解析度，這時可能需要滾動條。 定義視窗可以通過窗口寬度匹配設備寬度來實現，可以通過HTML標記指定的視窗參數。下面的這個例子里，我們定義窗口寬度匹配設備寬度，初始縮放范圍從1開始。這意味著移動瀏覽器將調整頁面寬度縮放比例來適應設備寬度。 4. 從頁眉頁腳開始 當你通過窗口寬度匹配設備寬度定義視窗後，你可能會注意到針對桌面的頁面不適應小型移動設備屏幕，會出現溢出問題。這是你需要構建HTML響應。通常情況下，所有的網站都有帶有頁面和頁腳HTML的頁面。你可以從這里開始，因為你改變這些頁面和頁腳將影響所有的頁面。 5. 使用菜單按鈕收縮導航欄 PHP類網站下，可以使用兩個水平菜單：一個常見的導航，另一個用於記錄用戶操作。 橫向菜單可以利用可用的水平空間的優勢，所以基本上所有的響應頁面，其導航菜單都會有兩個版本：一個是寬屏幕時，整個菜單選項可以水平顯示，另一個則是菜單搜索按鍵加一個搜索欄。 網站使用media查詢來顯示單一類型的導航(或另一個)，下面代碼演示的是HTML和CSS實現該功能的簡化版本： Desktop menu here Mobile menu here @media (max-width: 1024px) { .c1025 { display: none; } } @media (min-width: 1025px) { .u1025 { display: none; } } 用PHP類構建的菜單按鈕使用了一個很好的技巧來避免對JavaScript的需求。它使用一個隱藏的表單復選框來控制下拉菜單的可見性。 下面是使用HTML和CSS渲染這類菜單的簡化版本： All class groups Latest entries Top 10 charts Blog Forums Help FAQ Icon Image here .menu-items { position: absolute; z-index: 1001; background-color: #103754; border-color: #cccccc; border-style: solid; border-width: 1px; padding: 4px; top: 32px; line-height: 36px; } .menu-items a { color: #C3F0FF; font-weight: bold; text-decoration: none; } #navigation-menu { display: inline-block; padding: 6px 10px 0px 10px; } #navigation-menu .menu-items { display: none; } #navigation-button:checked + .menu-items { display: inline-block; } #navigation-menu input[type="checkbox"], #navigation-menu ul span.drop-icon { display: none; } 6. 犧牲不重要頁面元素 完成頁眉頁腳，你還要繼續你的步伐，穿梭於網站每個類型頁面中，按照頁面訪問優先順序(參照前文)。 使用瀏覽器開發工具在小屏幕上預覽頁面，減少視窗分離器寬度，直到頁面元素溢出視窗。 這時你需要找出哪些不重要的頁面元素，你可以使用CSS樣式通過media查詢犧牲和隱藏它們。 下面演示的是media查詢定義逐漸減少點，用於隱藏不同頁面元素： @media (max-width: 1024px) { .c1025 { display: none; } @media (min-width: 1025px) { .u1025 { display: none; } } @media (max-width: 499px) { .c499 { display: none; } } @media (max-width: 799px) { .c799 { display: none; } } @media (max-width: 640px) { .c640 { display: none; } } @media (max-width: 360px) { .c360 { display: none; } } 7. 使用Google Page Speed Insights來解決懸而未決的問題 谷歌驗證一個網站是否移動友好的標准有什麼?在視窗上顯示恰好的可見內容只是其中的一個標准，還有其他一些不太好評估的，比如接觸點的距離(如鏈接和按鈕)。 幸運的是，谷歌提供了一個工具來幫助我們發現需要修復的問題，這只是Google Page Speed Insights工具的一部分。 你只需要輸入一個你製作的頁面URL，它會向你展示一個等級(0%-100%)，讓你知道你的頁面在手機上的可用性等級，它還會顯示該頁面目前所存在的問題。 8. 圖像適應頁面寬度限制 你可能會遇到這樣一個問題，需要適應小屏幕的頁面存在很多的圖片元素。這時你有兩種選擇，一是如前面提到的，犧牲圖片元素;二是自動的調節圖片的寬度和高度，該方法適用於有可用的空間。 第二種方法可以通過將圖片的寬度設置為100%(或其他百分比)來實現，然後將圖片高度設置為自動，以此來保證原始圖片的比例。如下段代碼所示例的那樣： @media (max-width: 55em) { .blog-post-body p img { width: 100%; height: auto; } } 與圖像相關的另一個方面是，如果你的菜單和圖標使用的是小圖像時，當瀏覽器縮放視窗來匹配設備寬度，那些小圖片看起來會很大，如果那些圖片解析度很低的時候，更是會破壞整個頁面的質量。而解決這種問題的一個方法是使用高解析度圖片，設置較小值的寬度來匹配設備。 9. 安全“填充”鏈接和按鈕四周 谷歌工具可能會報告的另一個典型問題是，你的鏈接或按鈕太接近對方了，這很容易導致錯誤操作。你可以利用CSS樣式表“填充”這些鏈接和按鈕的空間，下面是一個簡單的示例： .safe-padding { padding: 2px; line-height: 200%; } 10.使用谷歌網站管理員工具：移動可用性報告 谷歌在Google Webmaster Tools網站上為我們提供了另一種工具：Mobile Usability(移動可用性)。它可以給你一個進程的概念，以及任何你可能或者你認為沒有解決的問題。 這個工具顯示不同類型的問題：觸摸元素太近、小字體尺寸、寬度固定窗口……。它可以給你提供擁有這些問題的頁的總數以及URL。不過工具不會實時報告這些，實際報告大概會延遲一個星期，所以它的報告中或許會存在你已修復的問題。盡管如此，它也是很有用處的，任何頁面的問題都會有一個鏈接，你對此會一目瞭然。 總結 對Web開發者來說，調整網站以適應移動設備是乏味和無聊的任務，遠沒有前端工作給人帶來的興奮。然而這是必須的進行的一項任務。 移動適應工作仍在繼續，只有部分頁面適應了移動設備，所以在未來我們會看到更多的變化。 無論如何，本文是為了分享一些有用的信息給那些正處於網站適應移動設備過程的人們。如果您已經經歷過類似的過程，或者您有其他相比較本文所分享的技巧而言更好的方法。您可以留下您的觀點，分享您的經驗。
⑷ 網頁怎麼根據用戶屏幕大小自動調整網頁寬度
方法：
1、在網頁頭部加上這樣一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
解釋：
width=device-width ：寬度等於設備屏幕的寬度
initial-scale=1.0：表示：初始的縮放比例
minimum-scale=0.5：表示：最小的縮放比例
maximum-scale=2.0：表示：最大的縮放比例
user-scalable=yes：表示：用戶是否可以調整縮放比例
另外：如果想控制字體的大小的話，應該使用相對大小，可以用下面這段代碼，一般不用也可，這里只是說明一種方法。
相對大小的字體
字體也不能使用絕對大小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）。
2、讓網頁適應不同的瀏覽器
瀏覽器的格局現在是兩分天下，一分是IE，另一分是NetScape，在國內Ie有絕對的佔有率，在這種情況下我們設計的網頁只要兼容它就行了，但NetScape在國外還是有很多人使用，畢竟它是瀏覽器的元老。
雖然沒有辦法做出讓所有瀏覽器都兼容的網站，但只要注意以下幾點，做出來的網頁在各個瀏覽器都中能達到比較好的顯示效果：
a、不要混合使用層和表格排版，如果是父子關系，如層中表格，不在此原則范圍內。
b、內聯式的 CSS 在 Netscape Navigator 中經常會出現問題，使用鏈式或內嵌式。
c、有時需要在空層插入表格或者透明圖片，以保證在 Netscape Navigator 里的效果。
d、對於只有幾個像素寬度或高度的層，改用圖片來實現。
e、避免使用 W3C 組織不推薦的排版屬性，用 CSS 代替。
⑸ 移動端，獲取手機屏幕的寬，應該怎麼做
網上關於這方面的文章有很多，重復的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。 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標簽的一些小體會，分享給大家。
⑹ js中怎麼獲取當前屏幕寬度
1、js中獲取當前屏幕寬度方法如下：
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth （包括邊線的寬）
網頁可見區域高： document.body.offsetHeight （包括邊線的高）
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕解析度的高： window.screen.height
屏幕解析度的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
⑺ 網頁怎麼根據用戶屏幕大小自動調整網頁寬度
1 js可以用檢測屏幕解析度然後跳轉的方法. 檢測屏幕寬度為800的時候跳轉到800目錄或者index1.html 檢測屏幕寬度為1024的時候跳轉到1024目錄或者index2.html 檢測屏幕寬度為1280的時候跳轉到1280目錄或者index3.html 檢測屏幕寬度為1440的時候跳轉到1440目錄或者index4.html 你自己寫好相應的幾種寬度的網頁即可. 在asp網頁製作中，根據解析度自動調整網頁寬度，無須用js編制類似以下的腳本： <script LANGUAGE="JavaScript" <!-- Begin function redirectPage(){ var url800*600 = "800*600頁面"; var url1024*768 = "1024*768頁面"; var url1440*900 = "1440*900頁面"; if ((screen.width == 800) && (screen.height == 600)) window.location.href= url800x600; else((screen.width == 1024) && (screen.height == 768)) window.location.href= url1024x768; else((screen.width == 1440) && (screen.height == 900)) window.location.href= url1440x900;}// End -- 定義表格寬度為100%:width:100%