『壹』 一般移動端頁面怎麼適配ios頁面
1、viewport 簡單粗暴的方式：
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
直接設置viewport為320px的1.3倍，將頁面放大1.3倍。
為什麼是1.3？
目前大部分頁面都是以320px為基準的布局，而iphone6的寬度比是375/320 = 1.171875，iphone6+則是 414/320 = 1.29375那麼以1.29倍也就約等於1.3了。
2、ip6+ 的CSS media query
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
/*iphone 6*/
}
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
/*iphone 6 plus*/
}
PS: 也可以直接使用實際的device-width：如 device-width : 375px
在原有頁面的基礎上，再針對相應的屏幕大小單獨寫樣式做適配。
3、REM布局
REM是CSS3新增的一種單位，並且移動端的支持度很高，android2.x+，ios5+ 都支持。REM是相對於dom結構的根元素來設置大小，也就是html這個元素。相較於em單位，rem使用上更容易理解及運用。
REM與PX的換算可以查看網址： https://offroadcode.com/prototypes/rem-calculator/
假設，html我們設置font-size:12px; 也就是說12px相對於1rem，那麼18px也就是 18/12 = 1.5rem。
那麼我們以320px的設計布局為基準，將html設置為font-size:100px，即100px = 1rem。(設置100px是為了方便計算)那麼可以將大部分px單位除以100就可以直接改成rem單位了。
REM如何做響應式布局？
1、如果僅僅是適配ip6+設備，那麼使用media query就行。
偽代碼如下：
/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*實際相當於14px*/}
/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
html{font-size: 129.375px;}
}
這樣，在ip6下，也就將頁面內的元素放大了1.17倍，ip6+下也就是放大了1.29倍。
2、如果是完全自適應，那麼可以通過JS來控制。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
};
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
頁面初始化的時候計算font-size，然後再綁定resize事件。這種效果就和百分比布局一樣了。
『貳』 如何在不使用js和css媒體查詢的情況下，適配移動端各種尺寸和比例的屏幕
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,maximum-scale=1, user-scalable=no">
把這句話加到title標簽下邊 求採納
『叄』 移動前端開發，怎麼讓頁面適應不同的屏幕
頭部寫上下面代碼：
<meta name="viewport" content="width=device-width, initial-scale=1"/>
然後網頁寬度一般都用百分比，不要固定死。
再用@media媒體查詢
不同大小屏幕要做不同的css樣式
附件是一個@media的小例子
縮放瀏覽器窗口可以查看樣式的變化
『肆』 怎樣低成本的實現網頁在移動端的適配
解決方案涉及到的知識點：
viewport
媒體查詢(media query)
Javascript window.matchMedia
響應式圖片
柵格布局
頂部導航
測試工具
iOS和Android自帶的瀏覽器都是基於webkit內核，所以我們可以使用viewport屬性和media
query技術實現網站的響應性。
viewport
在<head>之中添加viewport元數據標簽。
width=device-width 實現屏幕適配，頁面繪制根據觸屏大小變化，保持一致。
initial-scale 表示初始縮放。
Js代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
maximum-scale 表示最大縮放比例，1意味著不能進行縮放。
user-scalable=no
禁用頁面縮放（zooming）功能。禁用縮放後，用戶只能滾動屏幕，讓你的網站看上去更像原生應用。
注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！
Js代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
媒體查詢(media
query)
根據不同的解析度，引用不用的css
Css代碼
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
Bootstrap3的實現 http://v3.bootcss.com/css/#grid-media-queries ，
以下是LESS方法的實現
Js代碼
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Javascript window.matchMedia
用CSS3解決的確很方便，但某些場景下仍然需要JS技術。
Js代碼
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}
狀態改變時監聽
Js代碼
function setup_for_width(mql) {
if (mql.matches) {
// The screen width is 400px or wider. Set up or change things
// appropriately.
} else {
// The screen width is less than 400px. Set up or change things
// appropriately.
}
}
var width_mql = window.matchMedia("(min-width: 400px)");
// Add a listener for when the result changes
width_mql.addListener(setup_for_width);
// And share the same code to set things up with our current state.
setup_for_width(width_mql);
『伍』 html頁面 自適應pc端 屏幕大小 怎麼設置
使用媒體查詢，參考bootstrap裡面的設置，或者直接使用bootstrap框架吧，根據瀏覽器的寬度自動設置寬度的
媒體查詢代碼實例
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
『陸』 web端適配主流解析度都有哪些
屏幕解析度一般是這樣的。 然後做響應式的時候，需要考慮的是1024 * 768、768 * 1280、640 * 960、320 * 480的解析度，其他的都不怎麼考慮。 1024 * 768 是一般電腦屏幕解析度； 768 * 1280是平板橫著時的解析度 640 * 960是平板豎著時的解析度 ...
『柒』 手機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/
『捌』 網頁如何自適應屏幕大小，主要是在移動客戶端上。
做網站的話.你只要適應1024*768這個解析度就可以了..
其他的事情不是你來做的..
作為一個網頁,一般情況是沒有許可權知道客戶端的具體信息的..如果你不知道屏幕解析度,又如何自適應?
『玖』 移動 WEB 如何適配千奇百怪的解析度
在移動端存在各式各樣的解析度，移動端網頁就會面對很復雜的兼容問題，並非是兼容系統，而是要保證頁面在不同解析度網頁當中效果的一致性。
對於這種問題，其實還是比較好解決的，橫向採用百分比，就能夠實現內容隨著設備寬度大小的變化而變化的需求。
比較難解決的問題是縱向上的高度問題，相信你也使用過百分比去嘗試解決，但是如果高度採用百分比，盒模型中padding、margin等屬性的計算方式有些特殊，這也就導致縱向不能夠使用百分比。（對於這方面如果希望了解，可以在一個叫「HTML5學堂」的網站當中查看，裡面有非常詳細和清晰的講解，在此我就不再重復書寫了）
這樣的現狀就導致縱向需要使用其他單位來解決，於是就會使用到CSS3當中一個新的單位，rem。
rem是一個相對度量單位，是針對html標簽的字體大小來計算的。如果html標簽的字體大小為16px，那麼1rem就是16px，如果html標簽的字體大小是20px，那麼1rem就是20px。
橫向使用百分比，縱向使用rem，之後用JS去獲取當前設備寬度，並根據設備寬度、設計圖寬度、設計圖基準字體大小，通過JS計算出當前設備下html文件的font-size（基準字體大小），就是適配移動端各個解析度設備的方法。
給出JS代碼作為參考，不過，這個JS是基於JQ的：
這個裡面設計圖是640的，設計圖中最小字體是24像素。所以，當你進行開發時，如上這段代碼當中的幾個數字，也要根據設計圖的具體值而調整。