北鸟南游的博客 北鸟南游的博客
首页
  • 前端文章

    • JavaScript
    • Nextjs
  • 界面

    • html
    • css
  • 计算机基础
  • 后端语言
  • linux
  • mysql
  • 工具类
  • 面试相关
  • 图形学入门
  • 入门算法
  • 极客专栏
  • 慕课专栏
  • 电影资源
  • 儿童动漫
  • 英文
关于我
归档
GitHub (opens new window)
首页
  • 前端文章

    • JavaScript
    • Nextjs
  • 界面

    • html
    • css
  • 计算机基础
  • 后端语言
  • linux
  • mysql
  • 工具类
  • 面试相关
  • 图形学入门
  • 入门算法
  • 极客专栏
  • 慕课专栏
  • 电影资源
  • 儿童动漫
  • 英文
关于我
归档
GitHub (opens new window)
  • JavaScript

    • 原生js
    • vue
    • react
    • node
    • nextjs
    • 其它框架
      • 按照字体格式引用svg图标
      • 移动端开发兼容
  • 界面

  • front
  • other
北鸟南游
2017-12-15

移动端开发兼容性

// 移动端meta标签

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

// X5浏览器内核解析

<meta name="x5-orientation" content="portrait" />  // 强制竖屏
<meta name="x5-fullscreen" content="true" />  // 强制全屏
1
2

// UC浏览器内核

<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
1
2

//取消数字拨号的链接

<meta name="format-detection" content="telephone=no, email=no">
可以给数字单独添加拨号的链接 <a href="tel:15812345678">15812345678</a>
1
2

//去掉移动端点击时的背景颜色

a, input, button{
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
1
2
3

//清除按钮的圆角

input, button {
    -webkit-appearance: none;
    border-radius: 0;
}
1
2
3
4

// 禁止文字缩放

body *{
    -webkit-text-size-adjust:100%;
}
1
2
3

// Font Boosting 在一段文字我们没有给他设置高度的时候,在webkit内核下,文字的大小被浏览器放大 解决办法:设置高度,如果高度不定,设置最大高度 max-height // 禁止文字缩放 //移动端取消虚拟键盘弹出

document.activeElement.blur() // ios隐藏键盘
this.$refs.input.blur() // android隐藏键盘
1
2

动态计算html的font-size,定义rem的大小

(function (doc, win) {
        var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
1
2
3
4
5
6
7
8
9
10
11
12
编辑 (opens new window)
上次更新: 2025/04/19, 14:22:11
按照字体格式引用svg图标
移动端H5的meta标签

← 按照字体格式引用svg图标 移动端H5的meta标签→

最近更新
01
色戒2007
04-19
02
真实real
04-19
03
Home
更多文章>
Theme by Vdoing | Copyright © 2018-2025 北鸟南游
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式