首页 > 代码库 > 移动端适配的问题
移动端适配的问题
在书写移动端项目的时候,我们必不可少的就是meta标签的viewport视图:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scle=2.0,mininum-scale=1.0,user-scaable=no">
加上这段代码就是为了使页面的宽度可以等于屏幕的宽度,并且给移动端添加显示的初始比例,最大缩放比,最小缩放比,以及是否允许用户缩放屏幕
移动端的自适应实现在这里,我主要介绍四种方法:
<!-- 方法一rem布局 -->
<!-- 给body和html添加一个font-size="100px"属性,并且将页面中的标签,不管是宽高,还是font-size,或着是其他的一些属性,只要有px的一律都改成rem单位,
<script>
function resetsize(){
var html=document.getElementsByTagName(‘html‘)[0];
var Ww=document.documentElement.clientWidth;
html.style.fontSize=Ww/psd的宽度*起始设置的fontSize+"px";
}
resetsize();
window.onresize=function(){
resetsize();
}
</script> -->
<!-- 方法二zoom布局 -->
<!-- 按照给定的psd图布局并且所有的尺寸都不变,直接按照给定的大小书写就好
<script>
function resetzoom(){
var Ww=document.documentElement.clientWidth;
var scale=Ww/当前psd图的宽度;
document.body.style.zoom=scale;
}
resetzoom();
window.onresize=function(){
resetzoom();
}
</script> -->
<!-- 方法三百分比布局 -->
<!-- 给html和body设置宽和高均为100%,页面中的所有与边距有关的都设置为百分比,但是字体大小仍然使用px; -->
<!-- 方法四引入外部文件 -->
<!-- 在引入外部文件(ort.js)之前,首先必须引入jq文件,值得注意的是,页面中的所有内容均使用PSD图上的数据 -->
移动端适配的问题