當前位置:首頁 » 網頁前端 » 手機web適配
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

手機web適配

發布時間: 2022-04-07 06:49:56

Ⅰ 如何製作手機自適應網頁

打開你需要製作手機網頁的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
將以上標簽加入之後保存,再用手機打開即是自適應網頁了。

Ⅱ 怎麼讓網頁自動適應各個手機瀏覽器

1 . 第一種:

第一個想法是需要使用一個 css 背景圖,如果這張圖夠大,就能填充整個屏幕。當瀏覽器窗口大小沒有圖片大時,它將自動隱藏多餘的部分。
<head> .... <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("img.source-image").hide(); var $source = $("img.source-image").attr("src"); $('#page-body').css({ 'backgroundImage': 'url(' + $source +')', 'backgroundRepeat': 'no-repeat', 'backgroundPosition': 'top center' }); }); </script> </head> <body id="page-body"> <img class="source-image" src="images/image.jpg" alt="" /> </body>

上面的這些代碼能夠自動隱藏超出瀏覽器窗口部分的圖片(image.jpg)多餘部分,不會使瀏覽器產生滾動條。

2 . 第二種:

第一次試驗的效果並沒有達到要求,並不是真的使得背景圖片適應窗口大小,應該使用設置「寬度」和「高度」屬性來控制圖片的大小,如果我們能夠得到瀏覽器窗口顯示像素,就可以利用這個數字來控制圖片大小,同時保持比例。

使用 jquery 和 dimensions plugin 可以獲得這些參數。
<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.dimensions.js"></script> <script type="text/javascript"> $(document).ready(function() { var $winwidth = $(window).width(); $("img.source-image").attr({ width: $winwidth }); $(window).bind("resize", function(){ var $winwidth = $(window).width(); $("img.source-image").attr({ width: $winwidth }); }); }); </script>

為了讓這張圖片更像一個背景圖像,我們設置:
img.source-image {position: absolute;top: 0;left: 0;}

因為背景圖片加上了定位代碼,那要加在背景圖片上任何東西都需要定位,如果您的背景圖像是豎條狀的(特別的高),而你的瀏覽窗口特別的寬,很容易造成背景圖片高度超過您的瀏覽器窗口的高度,為了防止這種情況,需要設定對超出的部分進行隱藏:
body {overflow: hidden;}

3 . 第三次方法(最好的):

Stu Nicholls version給出了最好的方法(看了下網易的首頁也是這樣做的),這處理方式不需要任何的 JavaScript 就能完美的達到目的。
#img.source-image {width: 100%;position: absolute;top: 0;left: 0;}

在 css 里直接設定背景圖片寬度的百分比,這是這個方法的效果。這個方法是最好的,而且不需要任何的 JavaScript 。

Ⅲ 如何讓網頁自適應手機屏幕解析度

前台樣式不同解析度下樣式不一樣就行,可以去學習一下前端知識,再回來慢慢寫就可以了』,還不會的話俺可以提供技術幫助

Ⅳ 移動web怎麼做屏幕適配

業內比較流行的做法(參考阿里的flexible),有以下要點:
1、設置viewport為設備寬度(這里不一定,但目前先這樣足矣)
2、將viewport分成10rem,並計算出1rem在當前瀏覽器的像素值,把它賦予html標簽的font-size(分成10rem只是為了方便計算而已)
3、寫CSS代碼時,遇到要適配的地方,比如width,margin,padding等,就不要再用px了,改成用rem
JS和Html代碼如下:

CSS代碼做了類似如下的修改:

運行結果如下:邊距和頭像圖片都隨屏幕變化而變化了。

Ⅳ 寫web端跟寫自適應的pc端手機端有什麼不一樣呢。

手機的屏幕比較小。
當頁面在手機上顯示的時候,布局可能會和PC 的效果不同。
比如說:
兩欄自適應布局中。pc端可能是兩欄,但在小屏手機中,可能就是一欄了。

Ⅵ 如何讓網站自適應手機

關於網站如何做到自適應網頁,可根據如下操作:
首先,在網頁代碼的頭部,加入一行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規則。
其次,除了布局和文本,」自適應網頁設計」還必須實現圖片的自動縮放。有條件的話,最好還是根據不同大小的屏幕,載入不同解析度的圖片。有很多方法可以做到這一條,伺服器端和客戶端都可以實現。

Ⅶ 手機web版的頁面(html/css)怎麼兼容所有瀏覽器和各個手機屏幕解析度

你說的這個問題,應該算的上是手機適配的問題!

既然是手機web端頁面,這里的尺寸應該指的是瀏覽器的可視區域!

同樣是5寸屏,一些有問題一些木有問題。

那他們的不同點就在於瀏覽器的可視區域不一樣。

針對這類極小部分的適配問題。可以通過。css適配做出適當調整:

//手機瀏覽器是這個最大區域(可視區域375px)時,應用這個裡面的樣式
@mediascreenand(max-height:375px)
{

}
//手機瀏覽器是這個最小區域(可視區域375px)時,應用這個裡面的樣式
@mediascreenand(mim-height:375px)
{

}
//手機瀏覽器是這個最大區域(可視區域375px)介於345-75時,應用這個裡面的樣式
@mediascreenand(mim-height:375px)and(mim-height:775px)
{

}

具體你可以參考這個:

http://www.ibm.com/developerworks/cn/web/wa-cssqueries/

Ⅷ 做個手機頁面怎麼才能適配不同的手機

一般來說,iH5的手機案例默認的尺寸是640*1040px,也就是iPhone6 plus的尺寸,我用的正是iPhone6 plus,所以我做案例時沒出現過這類問題,而你遇到案例呈現不完整的情況我想應該是手機型號的不同導致的。
你可以設置舞台或者設備的屬性,舞台裁剪為no,如果用的是短款手機觀看作品,有滾動條也可以看到完整的案例。
如果你想要實現完美適配,可以做三個設備,寬度均為640,高度可設置為1040(iPhone6 plus)、1008(iPhone5s和大部分Android手機)、832(iPhone4s)。
希望我的回答對你有幫助

Ⅸ HTML網頁如何自動適應手機屏幕

  • 在網頁代碼的頭部,加入一行viewport元標簽。viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等於屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。所有主流瀏覽器都支持這個設置,包括IE9

  • 不使用絕對寬度由於網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。只能指定百分比寬度

  • 相對大小的字體字體也不能使用絕對大小(px),而只能使用相對大小(em)。

Ⅹ 如何開發手機端網頁,如何讓網頁自適應

利用bootstrap框架中的柵格可以很快就上手pc端和移動端的自適應。