码迷,mamicode.com
首页 > 移动开发 > 详细

关于移动端的前端小结

时间:2020-06-20 16:07:53      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:window   x64   isa   包含   define   name   mobile   代码   pac   

<meta>标签

开发移动端项目需要使用视口标签<meta>来禁止缩放,页面显示时文字就不会变小了:

技术图片

 

 这是移动端屏幕适配问题解决过程中会遇到的一环(布局便是另一环):

1、谷歌浏览器使用手机模式调试时,手机型号旁边是独立像素,各种手机屏幕大小看起来差不多,但像素分辨率区别很大,因为使用设备独立像素作为统一单位。

技术图片

 

2、设备独立像素与物理像素是有区别的。在320*480的手机上可以认为一个设备独立像素=一个物理像素,但在其他屏幕分辨率下的手机不能这么算。

3、设备使用的css像素是一个抽象的概念,会随着页面的放大缩小而改变包含的物理像素的多少,同时css像素与设备独立像素之间也有关系:页面的缩放系数 = css像素/设备独立像素。设置initial-scale=1.0使得1个css像素=1个设备独立像素,前端就可以用css像素来写代码了。

4、设置width=device-width,让布局视口=理想视口

5、设置user-scalable=no,禁止用户缩放页面

以上关于移动端屏幕适配、像素等问题都是借鉴学习于下方来源:

  1、https://baijiahao.baidu.com/s?id=1634027011072225045&wfr=spider&for=pc

  2、https://www.cnblogs.com/iovec/p/7700733.html

  3、http://caibaojian.com/mobile-responsive-demo.html

  4、https://mp.weixin.qq.com/s/NNNoAHWVujTA8OblnFREHg

移动端布局类问题

1、html字体大小自适应

js方法1:摘自 移动端屏幕适配(rem+js方法)

技术图片

 

 js方法2:摘自手机端页面自适应解决方案——rem布局

技术图片

 

 以上2种方法用<script>标签包裹然后放在<head>标签中即可;

技术图片

 

 2、宽高可以用百分比、rem、em

3、定位和flex布局移动端都可以用。

技术图片

 

 

移动端点击延迟

移动端的点击事件或有300ms延迟,如果用的是Jq框架,可以搭配fastclick插件解决延迟问题:

1、下载引入fastclick.js

技术图片

 

 技术图片

 

 // 判断设备类型

var judgeDeviceType = function () {
    var ua = window.navigator.userAgent.toLocaleLowerCase();
    var isIOS = /iphone|ipad|ipod/.test(ua);
    var isAndroid = /android/.test(ua);
    var isMiuiBrowser = /miuibrowser/.test(ua);
    return {
        isIOS: isIOS,
        isAndroid: isAndroid,
        isMiuiBrowser: isMiuiBrowser
    }
}()
 
// 获取到焦点元素滚动到可视区
function activeElementScrollIntoView(activeElement, delay) {
    console.log(‘当前编辑框滚动到可视区域‘)
    var editable = activeElement.getAttribute(‘contenteditable‘)
 
    // 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
    if (activeElement.tagName == ‘INPUT‘ || activeElement.tagName == ‘TEXTAREA‘ || editable === ‘‘ || editable) {
        setTimeout(function () {
          activeElement.scrollIntoView();
        }, delay)
    }
}
 
// 监听输入框的软键盘弹起和收起事件
function listenKeybord($input,focusCb,blurCb) {
    if (judgeDeviceType.isIOS) {
        // IOS 键盘弹起:IOS 和 Android 输入框获取焦点键盘弹起
        $input.addEventListener(‘focus‘function () {
          console.log(‘IOS 键盘弹起啦!‘);
          // IOS 键盘弹起后操作   执行input聚焦后的动作
          focusCb();
 
          //所有定位在页面底部的按钮统一一个类名listenKeybordBtn,键盘弹起后隐藏
          $(‘.listenKeybordBtn‘).css(‘display‘‘none‘);
        }, false)
 
        // IOS 键盘收起:IOS 点击输入框以外区域或点击收起按钮,输入框都会失去焦点,键盘会收起,
        $input.addEventListener(‘blur‘, () => {
          console.log(‘IOS 键盘收起啦!‘);
          // IOS 键盘收起后操作   执行input失去焦点后的动作
          blurCb();
          $(‘.listenKeybordBtn‘).css(‘display‘‘block‘);
 
          // 微信浏览器版本6.7.4+IOS12会出现键盘收起后,视图被顶上去了没有下来
          var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
          if (!wechatInfo) return;
          var wechatVersion = wechatInfo[1];
          var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
          if (+wechatVersion.replace(/\./g, ‘‘) >= 674 && +version[1] >= 12) {
            window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
          }
        })
    }
 
    // Andriod 键盘收起:Andriod 键盘弹起或收起页面高度会发生变化,以此为依据获知键盘收起
    if (judgeDeviceType.isAndroid) {
        var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
 
        window.addEventListener(‘resize‘function () {
          var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
          if (originHeight < resizeHeight) {
            console.log(‘Android 键盘收起啦!‘);
            // 修复小米浏览器下,输入框依旧被输入法遮挡问题
            if (judgeDeviceType.isMiuiBrowser) {
              document.body.style.marginBottom = ‘0px‘;
            }
            //所有定位在页面底部的按钮统一一个类名listenKeybordBtn,键盘收起后显示
            $(‘.listenKeybordBtn‘).css(‘display‘‘block‘);
             blurCb()
          else {
            console.log(‘Android 键盘弹起啦!‘);
             // 修复小米浏览器下,输入框依旧被输入法遮挡问题
            if (judgeDeviceType.isMiuiBrowser) {
              document.body.style.marginBottom = ‘40px‘;
            }
            $(‘.listenKeybordBtn‘).css(‘display‘‘none‘);
            focusCb()
            activeElementScrollIntoView($input, 1000);  //键盘弹起编辑框滚动到可视区域
          }
          originHeight = resizeHeight;
        }, false)
    }
}
 
let phinput=$(‘input[name="phone"]‘);
//input控件聚焦和失去焦点有动作时
listenKeybord(phinput[0],function(){
    console.log(‘ 键盘弹起啦!‘);
    //聚焦时的处理
 
},function(){
    console.log(‘键盘收起啦!‘);
    //失去焦点时的处理
 
})

以上移动端软键盘兼容代码注意点

  部分Android机下表单元素点击、聚焦会自动触发window的resize事件,比如file类型的input发生点击时就会触发。因此,上边的软键盘兼容在只有一个input时运行不会出错;若有多个表单控件绑定点击事件时则需要再进一步兼容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
var listenKeybordFlag=‘Mi‘
 
// 判断设备类型
//...
//同上
 
// 获取到焦点元素滚动到可视区  同上
 
 
// 监听输入框的软键盘弹起和收起事件,添加了参数x用以标识当前触发window的resize事件是哪个表单控件
function listenKeybord($input,focusCb,blurCb,x) {
    if (judgeDeviceType.isIOS) {
        //IOS部分不变
    }
 
    // Andriod 键盘收起:Andriod 键盘弹起或收起页面高度会发生变化,以此为依据获知键盘收起
    if (judgeDeviceType.isAndroid) {
        var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
        window.addEventListener(‘resize‘function () {
           var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
       if(listenKeybordFlag==x){
         ;
       }else{  
         return false;
       }
 
          if (originHeight < resizeHeight) {
            console.log(‘Android 键盘收起啦!‘);
            // 修复小米浏览器下,输入框依旧被输入法遮挡问题
            if (judgeDeviceType.isMiuiBrowser) {
              document.body.style.marginBottom = ‘0px‘;
            }
            //所有定位在页面底部的按钮统一一个类名listenKeybordBtn,键盘收起后显示
            $(‘.listenKeybordBtn‘).css(‘display‘‘block‘);
             blurCb()
          else {
                console.log(‘Android 键盘弹起啦!‘);
                 // 修复小米浏览器下,输入框依旧被输入法遮挡问题
                if (judgeDeviceType.isMiuiBrowser) {
                      document.body.style.marginBottom = ‘40px‘;
                }
                $(‘.listenKeybordBtn‘).css(‘display‘‘none‘);
                focusCb()
            if(listenKeybordFlag==x){
               activeElementScrollIntoView($input,100)
            }
          }
          originHeight = resizeHeight;
        }, false)
    }
}
 $(‘#ideatxt‘).click(function(event) {
    listenKeybordFlag=‘ideatxt‘
 });
 $(‘#numDay‘).click(function(event) {
    listenKeybordFlag=‘numDay‘
 });
 
listenKeybord($(‘#ideatxt‘)[0],function(){;},function(){;},‘ideatxt‘)
 
listenKeybord($(‘#numDay‘)[0],function(){;},function(){
  if(listenKeybordFlag==‘numDay‘){
 
    //失去焦点的事件
 
  }
},‘numDay‘)

IF()条件判断 

   当条件语句为数字0,空字符串‘‘,undefined,null,false时为假。

 

关于移动端的前端小结

标签:window   x64   isa   包含   define   name   mobile   代码   pac   

原文地址:https://www.cnblogs.com/miaoLAY/p/13168662.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!