关于H5的一些自适应问题

 今天尝试做一个美美的APP后台登录界面，却发现背景这玩意如果想要一张图APP与PC端都可以用，却又很大的问题，那么下面开始试着寻找答案吧。以下基本是搜集的各种答案，最后我会给大家找出最终答案的。我想说我要用媒体查询，但是现在看看CSS3能否解决这个问题。

在这个问题出现之后我首先制作了页面的设备检测。

1、<script src="device.min.js" ></script>引入。

2、

<h1 id="biaoti"></h1>
<script>
var myh1 = document.getElementById('biaoti');
if(device.mobile()){//表示设备
myh1.innerHTML = '我的设备是手机';
}else if(device.ipad()){
myh1.innerHTML = '我的iPad';
}else{
myh1.innerHTML = 'pc端';
}
</script>

//声明判断执行device库的命令，并返回值；返回的值是布尔值；

3、检测设备进行跳转 命令：windown.location = "xx.html"；

　　　　还可以操作引入不同的样式

这个检测 注意项：

（1）、不可以写在window.onload = function(){};中，

（2）、不可以写在页面尾部，要写在头部，保证网址跳转第一个执行；

<script>
if(device.mobile()){//表示设备
windown.location = "xx.html"；
}else if(device.ipad()){
windown.location = "xx.html"；
}else{
windown.location = "xx.html"；
}
</script>

 

www.muxiaobai.net/admin.html

这个问题有三种解决方案，都不完美

1.  background-size: 100% 100%;，  保证能与手机屏幕一样大，但是会拉伸压缩图片导致难看死了

2. background-size: cover;  适用于chrome,在IE上有问题。

3. 用插件，backstretch，大小与手机屏幕一样大，有超出部分就截取掉。

1、首先你要明白背景图片没法100%。只能通过平铺的方式达到100%
2、你的背景图片超过了笔记本屏幕的大小，就没法显示全部。
3、<style>body {background:url("bglogo.gif") repeat fixed!important;}<style> 
代码说明： fixed 固定，大背景不会因为你拉动滚动条而滚动 
4、你反过来想一想，假如显示器有30“，你的图片100%实现了效果，图片是不是被拉伸，是不是会失真。