出现在手机中打开网页内容显示不完整的现象时，可以通过手指捏合屏幕的界面将其缩小以达到完整显示网页内容的效果。具体的以OPPO手机A5安卓81为例， *** 作方法如下：
1、在手机上打开自带的浏览器进入。
2、进入到浏览器页面以后输入需要访问的地址链接。
3、页面跳转以后进入到该网页界面，可以看到当前的页面内容显示是不完整的。使用两个手指在当前的界面中进行捏合。
4、此时即可看到已经可以在该手机的页面中完整显示网页的全部内容了。
打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。2
向浏览器声明该网页为移动设备自适应网页的meta标签为：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=10,maximum-scale=10,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
将以上标签加入之后保存，再用手机打开即是自适应网页了。
无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。
首先，在网页代码的头部，加入一行viewport标签
<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, minimum-scale=10, user-scalable=no" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为10，即网页初始大小占屏幕面积的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排错将导致判断失效。
第四，自适应
img { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：img { width: 100%; }
筚五、采用相对字体大小
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。祝你好运！
/ PC或中大型笔记本设备 desktop / @media all and (min-width: 1201px) { title-desktop{ display: block !important; } container { width: 1100px; } } / 中小型笔记本或大平板 laptop / @media all and (min-width: 980px) and (max-width: 1200px) { title-laptop{ display: block !important; } container { width: 920px; } }
但是上面的方法，可能不会兼容老版本ie。
所以也可以通过js，识别当前页面的分辨率，来给出样式，这种比较好也比较复杂，代码量很多但是一般没有兼容问题。
并不是加了meta标签，网站就会自适应手机屏幕了，还需要更改一些样式。
你上显示搜索框的宽度是568px，但是页面的宽度只有375（iPhone X的页面显示宽度），所以肯定会超出去，发生显示不全的情况
这种情况你可以使用media标签来做自适应
@media only screen and (max-width: 400px){search{width:300px}
}
上面代码的意思是当页面宽度小于400px的时候 就让search的宽度变成300px。你可以吧上面的代码加到你的css里面看一下效果
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）