Ⅰ html5裡面怎樣自動適應手機屏幕的高度
有兩種
1.通過設置viewport參數
2.使用css3中的縮放
兩種方法都需要獲取當前屏幕大小然後根據網頁寬度來計算縮放比例，然後進行縮放。但是因為目前手機種類繁多，瀏覽器種類也很多，所以每種方法各自都有不少的問題。
<</span>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：表示用戶是否可以調整縮放比例
Ⅱ 怎麼讓自己的網頁自己適應手機屏幕
打開你需要製作手機網頁的html或者php等等網頁源碼文件。在<head></head>之間加入meta標簽。
2
向瀏覽器聲明該網頁為移動設備自適應網頁的meta標簽為：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
3
將以上標簽加入之後保存，再用手機打開即是自適應網頁了。
Ⅲ 如何讓一個pc頁面自動適應手機屏幕
在網頁的<head>中增加一個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：表示用戶是否可以調整縮放比例
如果是想要一打開網頁，則自動以原始比例顯示，並且不允許用戶拖動和放大縮小的話，則是：
<meta name=」viewport」 content=」width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no」 />
Ⅳ pc端和移動端屏幕自適應
做網頁時，我們通常需要考慮到不同電腦屏幕尺寸，以及不同手機屏幕大小等問題，解決樣式發生改變的情況，那麼如何解決呢？現在主要是採用自適應來解決高度，寬度的，以及圖片自適應問題，下面就PC端和移動端來總結一下，通常進行自適應高度和寬度，圖片時，一般與頁面的布局存在關系。
1、最小尺寸解析度1024 768（傳統17寸顯示器），則可以採用940px、960px、或者常用的980px作為最小寬度。
2、1024 768之後稍大的解析度就是1280*768了，則可以採用1200px或者1220px作為稍大的網頁寬度。
3、支持css3、html5的高級瀏覽器可以利用CSS3 Media Queries讓網頁在不同解析度下自動調節布局標簽。
4、不支持css3、html5的腦殘瀏覽器特別是<=ie8系列則需要用js以及resize事件來控制html的布局標簽寬度了。
5、寬度自適應需要對每個顯示模塊進行不同寬度的計算，在做html布局時需要大量的計算與適配。
6、寬度自適應為不同寬度顯示器寫布局元素時常用的css。
Ⅳ CSS如何讓網站適應手機屏幕
並不是加了meta標簽，網站就會自適應手機屏幕了，還需要更改一些樣式。
你圖片上顯示搜索框的寬度是568px，但是頁面的寬度只有375（iPhone X的頁面顯示寬度），所以肯定會超出去，發生顯示不全的情況
這種情況你可以使用media標簽來做自適應
@mediaonlyscreenand(max-width:400px){
.search{width:300px}
}上面代碼的意思是當頁面寬度小於400px的時候 就讓.search的寬度變成300px。你可以吧上面的代碼加到你的css裡面看一下效果
Ⅵ 如何讓網站自適應手機
關於網站如何做到自適應網頁，可根據如下操作：
首先，在網頁代碼的頭部，加入一行viewport元標簽。<metaname=」viewport」content=」width=device-width, initial-scale=1″ />viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度(width=device-width)，原始縮 放比例(initial-scale=1)為1.0，即網頁初始大小占屏幕面積的100%。
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow(溢出)，避免了水平滾動條的出現。
「自適應網頁設計」的核心，就是CSS3引入的Media Query模塊。它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。
其次，除了布局和文本，」自適應網頁設計」還必須實現圖片的自動縮放。有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現。
Ⅶ 如何讓網頁自動適應手機屏幕大小 ，求方法，若有代碼更好，謝謝
在網頁的選項菜單里有「設置」-「縮放模式」/「適應屏幕」這兩個選項，不同手機大同小異，你自己看需要選吧。
Ⅷ 如何製作適合手機屏幕大小的網頁
網路站長平台里添加你的網站，里邊有個站點屬性設置，設置類型點擊自適應。當然這個是自動設置自適應手機大小，可能沒那麼完美，有問題可以繼續問我。
Ⅸ 做好了網頁，怎麼讓它自適應手機屏幕
首先，在網頁代碼的頭部，加入一行viewport標簽<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。即讓viewport的寬度等於物理設備上的真實解析度，不允許用戶縮放。
其次：網頁寬度css一定要使用百分比width: xx%;，不能用絕對像素。當然可以width:auto;
第三，流動布局.left{float: left;width: ***%;}
第四，選擇載入css這是自適應的關鍵部分.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} }/* 設置了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 */@media screen and (max-width: 1200px) { .abc {width: 900px} }
設置了瀏覽器寬度不大於1200px時 abc 顯示900px寬度 */@media screen and (max-width: 901px) { .abc {width: 200px;} } /* 設置了瀏覽器寬度不大於901px時 abc 顯示200px寬度 */@media screen and (max-width: 500px) { .abc {width: 100px;} }
設置了瀏覽器寬度不大於500px時 abc 顯示100px寬度 */ 需要注意是CSS代碼順序，由大到小排版CSS（判斷瀏覽器寬度越大越放前），這樣是因為邏輯關系，@media 判斷CSS排錯將導致判斷失效。