Ⅰ 如何讓一個pc頁面自動適應手機屏幕
頁面自適應屏幕的方法(以下字母及標點為專業代碼):
無論是電腦還是手機,要做到自適應屏幕,其實都是一樣的。
首先,在網頁代碼的頭部,加入一行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的寬度等於物理設備上的真實解析度,不允許用戶縮放。
Ⅱ 怎麼讓自己的網頁自己適應手機屏幕
打開你需要製作手機網頁的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
將以上標簽加入之後保存,再用手機打開即是自適應網頁了。
Ⅲ html5頁面怎麼適應手機屏幕
下面鏈接是講述一些html5頁面怎麼適應手機屏幕的方法!
http://www.mamicode.com/info-detail-864013.html
Ⅳ 如何讓網站自動適應手機屏幕。我是用DW編輯的。
你這個問題多了,說白了就是你沒手機方面的web前端開發的經驗,html結構、css、js等幾個方面都要重新改寫。最好是花錢或花人情關系找你當地搞這方面的人幫你改。這個工作量不算很小,估計你在網上把代碼貼出來沒人會幫你免費解決的。
Ⅳ 手機網站開發如何使手機網頁自動適應屏幕的大小
做到這點非常不容易。幾個建議供你參考
1.你的網站要針對不同的機型進行設計。
2.系統判讀機型而後給出不同大小的頁面
3.如果可以不用做手機網站,因為現在的手機訪問互聯網站是沒有障礙的,大多數的公司都不會在這個方向上糾結。
4.如果是學習的話,請參看上面兩條、
5.希望能幫到你
Ⅵ 做好了網頁,怎麼讓它自適應手機屏幕
首先,在網頁代碼的頭部,加入一行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排錯將導致判斷失效。
Ⅶ html如何適應手機
有幾種,利用meta標簽、百分比法、使用CSS3單位rem、媒體查詢。
Ⅷ 如何讓網站自適應手機
關於網站如何做到自適應網頁,可根據如下操作:
首先,在網頁代碼的頭部,加入一行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規則。
其次,除了布局和文本,」自適應網頁設計」還必須實現圖片的自動縮放。有條件的話,最好還是根據不同大小的屏幕,載入不同解析度的圖片。有很多方法可以做到這一條,伺服器端和客戶端都可以實現。
Ⅸ 我的網頁不能自適應手機屏幕請教高手怎麼辦
應該沒做響應式布局的關系,是需要單獨為不同屏幕寬度編寫css樣式表文件才行的。
Ⅹ HTML網頁如何自動適應手機屏幕
在網頁代碼的頭部,加入一行viewport元標簽。viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等於屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。所有主流瀏覽器都支持這個設置,包括IE9
不使用絕對寬度由於網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。只能指定百分比寬度
相對大小的字體字體也不能使用絕對大小(px),而只能使用相對大小(em)。