‘壹’ 一般移动端页面怎么适配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像素。所以，当你进行开发时，如上这段代码当中的几个数字，也要根据设计图的具体值而调整。