移动端web开发的小技巧以及适配问题

最新推荐文章于 2023-03-30 10:31:04 发布

鳌拜的弟弟-熬夜:)

最新推荐文章于 2023-03-30 10:31:04 发布

阅读量269

点赞数

本文链接：https://blog.csdn.net/Libra_rookie/article/details/106155979

版权

1：小bug处理

安卓手机上点击a标签会有阴影出现，处理的方式为在body和element上加上下面这几句css样式

body{
     -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
     -moz-tap-highlight-color:rgba(0, 0, 0, 0);
     -ms-tap-highlight-color:rgba(0, 0, 0, 0);
     -o-tap-highlight-color:rgba(0, 0, 0, 0);
     tap-highlight-color:rgba(0, 0, 0, 0);
   }
 * {
     -webkit-tap-highlight-color:rgba(255,255,255,0);
  }

移动端禁止页面缩放

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

禁止页面把数字当成电话号码

<meta name="format-detection" content="telephone=no" />

禁止微信浏览器调整页面字体大小

body{

    /*禁止微信内置浏览器调整字体大小*/
    -webkit-text-size-adjust: 100% !important;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}

禁止用户选中页面文字

body{
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}
<body onselectstart="return false;"></body>

在iphone关闭长按图片保存图片弹窗

img {
　　　　-webkit-touch-callout: none;
　　}

设置输入框placeholder字体样式

::-moz-placeholder { color: #A9A9A9; font-family: "PingFangTC-Light";}
::-webkit-input-placeholder { color:#A9A9A9; font-family: "PingFangTC-Light";}
::-ms-input-placeholder { color:#A9A9A9; font-family: "PingFangTC-Light";}

在ios中输入框的光标发生位移，上移或者下移，解决方法是不要设置line-height

2：在微信浏览器中，链接到appstore的跳转全都被屏蔽了

解决办法一是通过跳转到腾讯的微应用（应用宝）中，才能通过它接着跳转到appstore，但是应用宝规定，必须把app上传到他们平台审核通过后才能有这个功能，和苹果商店类似，但是如果没有安卓版本的app，只有ios版本的话也不可以。也就是说要在应用宝上传安卓和苹果的app才能用应用包的这个功能。

解决办法二是当用户点击下载按钮之后提示用户在浏览器中打开，只要不是微信浏览器，其他浏览器都可以跳转到appstore下载app。现在大部分的公司是这样做的。

解决办法三是扫描二维码进行跳转，这在微信浏览器中是可以的，把链接生成二维码的网站一大堆，随便百度一个就可以了，当用户点击下载按钮之后，弹出二维码供用户扫描。但是问题来了，如果图片不大的话，长按图片是出不来扫描图中二维码那个按钮的。解决办法就是再设置一个全屏的二维码，让它的透明度为0，当用户长按时，其实是点的大的二维码，这样随便按哪都会弹出来扫描图中的二维码那个按钮。。。（本人也是这样做的）

3：

在ios移动端浏览器中，如果给视频video不设置controller的话，视频播放控件依旧会显示出来，很丑，解决办法就是用一个蒙版盖住视频，自己写播放按钮在上面，让视频的透明度为0，给包裹video标签的div设置背景图片，当点击播放时，才让视屏的透明度为1，这样就好看多了。。。现在一些大的科技公司就是有自己的播放器插件，也就是模拟视频播放器，这样就可以随心所欲的改变视频播放器的样式了。

4：（不同的手机屏幕适配问题）

我相信身为一名前端开发攻城狮刚开始最头疼的应该是手机适配问题了，怎样才能让自己写的页面在各种手机上都能达到一致效果没有固定的解决方法，各位童鞋可以根据自己的需要来进行适配，下面分别为几种适配方法：
（1）使用媒体查询的方式，在页面的css中加入以下代码：

@media only screen and (min-width: 1024px){
　　body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
　　body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
　　body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
　　body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
　　body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
　　body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
　　body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
　　body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
　　body{zoom:1.125;}
}
`
但是对于横屏是不好处理，判断横竖屏的媒体查询为：
`@media all and (orientation : landscape) {
　　h2{color:red;}/*横屏时字体红色*/
}
@media all and (orientation : portrait){
　　h2{color:green;}/*竖屏时字体绿色*/
}

（2）使用百分比布局：
不同的手机有着不同的分辨率，这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素，因为子元素的百分比高度是根据父元素的高度来确定的，当父元素的高度为不确定值时，或者说父元素的高度未定义时，子元素的高度百分比将没有用（没有参照物）。所以只有设置了父元素的高度，子元素的高度百分比才会有用。
通常使用百分比布局的人不多，因为计算太麻烦了。

（3）单位使用em与rem
em是根据相对单位，不是固定的，他会继承父级元素的字体大小，若没有父级则em的相对基准点为浏览器的字体大小，浏览器的字体默认为16px，因此若无父级元素，相对于浏览器大小：Xem=X*16px; rem是css3新增属性，是完全相对于HTML根元素大小设定的，默认为10px，因此无论父级字体大小，1rem=10px。所以可以根据屏幕的大小来动态的改变html的字体大小，然后使用rem为单位就可以进行适配了，改变浏览器字体的代码为：

function resetHtmlFont(){//改变浏览器字体大小
    var HTML= document.getElementsByTagName('html')[0];
    var deviceWidth = document.documentElement.clientWidth;
    var scale = deviceWidth/640;
    HTML.style.fontSize =( 100 \* scale)+'px';//乘以100的目的是浏览器最小的字体大小为12px,所以会出现屏幕过小会不执行，这样就可以按照正常的px大小除以100就是rem的值了
}
function resize(){
 if (window.orientation == 90 || window.orientation == -90) {
      //ipad、iphone竖屏；Andriod横屏
     resetHtmlFont();
      orientation = 'landscape';
       return false;
} else if (window.orientation == 0 || window.orientation == 180) {
       //ipad、iphone横屏；Andriod竖屏 
       resetHtmlFont();
      orientation = 'portrait';
      return false;
    }
}
//window.addEventListener("orientationchange",function(){//手机横屏或者竖屏事件
//  resize();
//});
window.onresize = window.onorientationchange = function(){
  resize();
}
resize();

但是这个如果在电脑端打开的话，屏幕多大就会多大，如果需求是在PC端打开也和移动端一样的话，用这种方法还得加一个判断，就是：

if (deviceWidth >=750) {//如果屏幕宽度大于750px的话，让deviceWidth为750 deviceWidth = 750; }

把这段加到resetHtmlFont这个函数里就可以了。
（4）栅格布局&&弹性布局
box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局。
弹性布局为CSS3新出现的属性，简单的用法看下面一个例子：

<ul class="flex-container">
   <li class="flex-item">![](/images/1.jpg)</li>
   <li class="flex-item">![](/images/2.jpg)</li>
   <li class="flex-item">![](/images/3.jpg)</li>
   <li class="flex-item">![](/images/4.jpg)</li>
</ul>

上面的html结构为一个弹性布局的ul标签内包含了4张400*400的图片，css代码为：

.flex-container {
  list-style: none;

   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.flex-item {
   padding: 5px;
}

（5）动态的改变页面的zoom值（和第三个类似）
开发者也可以根据屏幕的大小来动态的改变页面的zoom值来进行适配，具体的思路和第三个方法类似，就是动态的控制页面的缩放，具体的代码为：

function resetHtmlFont(){//改变浏览器字体大小
    var deviceWidth = document.documentElement.clientWidth;//获取设备宽度
    var scale = deviceWidth/640;//640是psd设计图宽度
    document.body.style.zoom = scale;
}
function resize(){
 if (window.orientation == 90 || window.orientation == -90) {
      //ipad、iphone竖屏；Andriod横屏
     resetHtmlFont();
      orientation = 'landscape';
       return false;
} else if (window.orientation == 0 || window.orientation == 180) {
       //ipad、iphone横屏；Andriod竖屏 
       resetHtmlFont();
      orientation = 'portrait';
      return false;
    }
}
//window.addEventListener("orientationchange",function(){//手机横屏或者竖屏事件
//  resize();
//});
window.onresize = window.onorientationchange = function(){
  resize();
}
resize();

(6)动态的改变页面的viewport来进行适配
个人觉得动态的改变页面的viewport值来进行适配是比较好的解决方案，包括本人以及很多大公司都在使用这种方法，这种方法的具体思路是通过js动态的改变页面的viewport来控制页面的显示区域进行适配，我们公司有个大神写了一个基于jquery的动态改变viewport的插件，通熟易懂，引入完jq再引入这个文件就可以适配了，无需进行别的操作，其它的布局什么的直接按照PC端的来写就可以了，下面来贴出代码：

+function(){
    adaptUILayout()
    function adaptUILayout(){

        var deviceWidth,
            devicePixelRatio,
            targetDensitydpi,
            //meta,
            initialContent,
            head,
            viewport,
            ua;

        ua = navigator.userAgent.toLowerCase();
        //whether it is the iPhone or iPad
        isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1;

        //设置像素比
        devicePixelRatio = window.devicePixelRatio;
        devicePixelRatio < 1.5 ? 2  : devicePixelRatio;

        if(window.orientation == 0 || window.orientation == 180){//ios的横屏，安卓的竖屏
            if(window.screen.width < window.screen.height){
                deviceWidth = window.screen.width; 
            }else{
                deviceWidth = window.screen.height; 
            }
        }else{//ios的竖屏，安卓的横屏
            if(window.screen.width > window.screen.height){
                deviceWidth = window.screen.width; 
            }else{
                deviceWidth = window.screen.height; 
            }
        }
        //动态的改变像素比
        if(devicePixelRatio==2 && (deviceWidth==320 || deviceWidth==360 || deviceWidth==592 || deviceWidth==640)){
            deviceWidth*=2;
        }

        if(devicePixelRatio==1.5 && (deviceWidth==320)){
            deviceWidth*=2;
            devicePixelRatio = 2;
        }
        if(devicePixelRatio==1.5 && (deviceWidth==750)){
            devicePixelRatio = 2;
        }

        //设置设备的独立像素比api
        targetDensitydpi = 750 / deviceWidth * devicePixelRatio * 160;
        创建meta标签
        initialContent   = isiOS 
            ? 'width=' + 750 + 'px, user-scalable=no, minimal-ui'
            : 'target-densitydpi=' + targetDensitydpi + ', width='+ 750 +', user-scalable=no';

        $("#viewport").remove();
        var head = document.getElementsByTagName('head');
        var viewport = document.createElement('meta');
        viewport.name = 'viewport';
        viewport.id = 'viewport';
        viewport.content = initialContent;

        head.length > 0 && head[head.length - 1].appendChild(viewport);
    }

    $(window).bind( 'orientationchange', function(e){
        adaptUILayout()
    });
}();

（7）使用css3的transiform的scale来改变页面的缩放值
对于一般的web展示页面，dom结构不算复杂的话可以使用css3的scale来动态的收缩页面，比我上面提到的动态的改变zoom值要流畅很多，腾讯里面的好多简单页面就是采用的这种方法，具体的思路和代码为：

var autoScale = function() {
    var ratio = 320/504, //原设计稿的宽高比（504是iPhone5的高度去掉标题栏高度）
        winW = document.documentElement.clientWidth,
        winH = document.documentElement.clientHeight,
        ratio2 = winW/winH,
        scale;

    if (ratio < ratio2) {
        scale = (winH/504).toString().substring(0, 6);
    }else{
        scale = (winH/504).toString().substring(0, 6);
    }
    var cssText = "-webkit-transform: scale("+ scale +"); -webkit-transform-origin:top; opacity:1;";
    $("body").attr('style', cssText);//如果给body添加不可以，就给一个最外层的div添加
};

//设定一定时间保证获取页面宽高正确
setTimeout(function(){
    if (document.documentElement.clientWidth/document.documentElement.clientHeight !== 320/504) {
        autoScale();
    }
},300);

//横屏竖屏切换
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', autoScale, false);