首页 > 其他分享 >移动端注意事项及坑位1(CSS)

移动端注意事项及坑位1(CSS)

时间：2023-11-02 14:33:29浏览次数：26  
标签：浏览器 坑位 height 注意事项 滚动 移动 声明 CSS 页面

学习 中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

1.调用系统功能

　　a标签能快速调用移动设备电话/短信/邮件功能，input标签可快速调用移动设备相册文件

<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a>

<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>

<!-- 发送邮件 -->
<a href="mailto:[email protected]">发送邮件给JowayYoung</a>

<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">

<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">

<!-- 多选文件 -->
<input type="file" multiple>

2.忽略自动识别

　　屏蔽部分浏览器对数字字母识别为电话/邮箱

<!-- 忽略自动识别电话 -->
<meta name="format-detection" content="telephone=no">

<!-- 忽略自动识别邮箱 -->
<meta name="format-detection" content="email=no">

<!-- 忽略自动识别电话和邮箱 -->
<meta name="format-detection" content="telephone=no, email=no">

3.弹出数字键

　　使用<input type="tel">弹起数字键盘会带上#和*，适合输入电话。推荐使用<input type="number" pattern="\d*">弹起数字键盘，适合输入验证码等纯数字格式。

<!-- 纯数字带#和* -->
<input type="tel">

<!-- 纯数字 -->
<input type="number" pattern="\d*">

4.唤醒原生应用

　　通过location.href与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，其基本格式为scheme://[path][?query]

  • scheme：应用标识，表示应用在系统里的唯一标识
  • path：应用行为，表示应用某个页面或功能
  • query：应用参数，表示应用页面或应用功能所需的条件参数

　　URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。

若在页面引用第三方原生应用的URL Schema，可通过抓包第三方原生应用获取其URL。

<!-- 打开微信 -->
<a href="weixin://">打开微信</a>

<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>

<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>

<!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

5.禁止页面缩放

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

6.禁止页面缓存

<meta http-equiv="Cache-Control" content="no-cache">

7.禁止输入框字母大写

<input autocapitalize="off" autocorrect="off">

8.Safari相关配置

<!-- 设置Safari全屏，在iOS7+无效 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 改变Safari状态栏样式，可选default/black/black-translucent，需在上述全屏模式下才有效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 添加页面启动占位图 -->
<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">

<!-- 保存网站到桌面时添加图标 -->
<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">

<!-- 保存网站到桌面时添加图标且清除默认光泽 -->
<link rel="apple-touch-icon-precomposed" href="pig.jpg">

9.其他浏览器一些兼容配置

<!-- 强制QQ浏览器竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- 强制QQ浏览器全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- 开启QQ浏览器应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- 强制UC浏览器竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- 强制UC浏览器全屏 -->
<meta name="full-screen" content="yes">

<!-- 开启UC浏览器应用模式 -->
<meta name="browsermode" content="application">

<!-- 开启360浏览器极速模式 -->
<meta name="renderer" content="webkit"

10.让:active有效，让:hover无效

 有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。

<body ontouchstart></body>

11.自动适应布局

　　针对移动端，通常结合JS依据屏幕宽度与设计图宽度的比例动态声明<html>的font-size，以rem为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。将rem布局比例设置成1rem=100px，即在设计图上100px长度在CSS代码上使用1rem表示

 

function AutoResponse(width = 750) {
    const target = document.documentElement;
    if (target.clientWidth >= 600) {
        target.style.fontSize = "80px";
    } else {
        target.style.fontSize = target.clientWidth / width * 100 + "px";
    }
}
AutoResponse();
window.addEventListener("resize", () => AutoResponse());

 

　　还可依据屏幕宽度与设计图宽度的比例使用calc()动态声明<html>的font-size

html {
    font-size: calc(100vw / 7.5);
}

 

　　若以iPad Pro分辨率1024px为移动端和桌面端的断点，还可结合媒体查询做断点处理。1024px以下使用rem布局，否则不使用rem布局

@media screen and (max-width: 1024px) {
    html {
        font-size: calc(100vw / 7.5);
    }
}

 

12.自动适应背景

.elem {
    width: 1rem;
    height: 1rem;
    background: url("pig.jpg") no-repeat center/100% 100%;
}

13.监听屏幕旋转

/* 竖屏 */
@media all and (orientation: portrait) {
    /* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
    /* 自定义样式 */
}

14.支持弹性滚动

　　在苹果系统上非<body>元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度。

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

15.禁止滚动传播

　　与桌面端浏览器不一样，移动端浏览器有一个奇怪行为。当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域，造成该区域也滚动起来。这种行为称为滚动传播。

若不想产生这种奇怪行为可直接禁止。

.elem {
    overscroll-behavior: contain;
}

16.禁止屏幕抖动

　　对于一些突然出现滚动条的页面，可能会产生左右抖动的不良影响。在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算

body {
    padding-right: calc(100vw - 100%);
}

 

17.禁止长按动作

　　有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作，声明touch-callout:none禁止用户长按操作。

有时不想用户复制粘贴盗文案，声明user-select:none禁止用户长按操作和选择复制。

* {
    /* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
    user-select: none; /* 禁止长按选择文字 */
    -webkit-touch-callout: none;
}

 

　　但声明user-select:none会让<input>和<textarea>无法输入文本，可对其声明user-select:auto排除在外。

input,
textarea {
    user-select: auto;
}

 

18.禁止字体调整

　　旋转屏幕可能会改变字体大小，声明text-size-adjust:100%让字体大小保持不变。

* {
    text-size-adjust: 100%;
}

19.禁止高亮显示

* {
    -webkit-tap-highlight-color: transparent;
}

20.禁止动画闪屏

　　在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了。

.elem {
    perspective: 1000;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

21.去除默认表单样式

button,
input,
select,
textarea {
    appearance: none;
    /* 自定义样式 */
}

22.美化滚动占位

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-image: linear-gradient(135deg, #09f, #3c9);
}

23.美化输入占位

input::-webkit-input-placeholder {
    color: #66f;
}

 

24.对齐输入占位

　　有强迫症的同学总会觉得输入框文本位置整体偏上，感觉未居中心里就痒痒的。桌面端浏览器里声明line-height等于height就能解决，但移动端浏览器里还是未能解决，需将line-height声明为normal才行。

input {
    line-height: normal;
}

 

25.对齐下拉选项

　　下拉框选项默认向左对齐，是时候改改向右对齐了。

select option {
    direction: rtl;
}

 

26.修复点击无效

　　在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。　

.elem {
    cursor: pointer;
}

 

27.识别文本换行

　　多数情况会使用JS换行文本，那就真的Out了。若接口返回字段包含\n或<br>，千万别替换掉，可声明white-space:pre-line交由浏览器做断行处理。

* {
    white-space: pre-line;
}

28.识别文本换行

　　若接口返回字段包含\n或<br>，千万别替换掉，可声明white-space:pre-line交由浏览器做断行处理。

* {
    white-space: pre-line;
}

29.开启硬件加速

.elem {
    transform: translate3d(0, 0, 0);
    /* transform: translateZ(0); */
}

30.画1px边框 

高清设备的一个像素点并不等于一个物理像素，一个css像素会被渲染成多个物理像素，从而看起来不清晰

处理：a.tranform进行缩放

.elem {
    position: relative;
    width: 200px;
    height: 80px;
    &::after {
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid #f66;
        width: 200%;
        height: 200%;
        content: "";
        transform: scale(.5);
        transform-origin: left top;
    }
}

 

　　b.图片或者svg代替

　　c.使用 box-shadow 模拟边框

标签：浏览器,坑位,height,注意事项,滚动,移动,声明,CSS,页面
From： https://www.cnblogs.com/foxing/p/17803858.html

相关文章

  • 使用async和await获取axios的数据注意事项
    使用async和await获取axios的数据的注意事项确定正确使用asyncfunctiongetInfo(){constres=awaitaxios.get('http://example.com')returnres.data}上述代码等同于asyncfunctiongetInfo(){constresult=(awaitaxios.get('http://example.com')).data......
  • 三维模型的顶层合并构建几个注意事项探讨
    三维模型的顶层合并构建几个注意事项探讨 在进行倾斜摄影超大场景的三维模型的顶层合并构建时，有一些重要的注意事项需要考虑。本文将对这些注意事项进行分析和总结。一、数据质量与准确性数据质量是进行顶层合并的关键因素之一。在进行合并之前，需要对原始数据进行质量控制和......
  • vue打包后导致css属性值丢失的问题如何处理？
    当使用Vue进行打包时，有时可能会出现CSS属性值丢失的问题。这通常是由于CSS的压缩和优化过程导致的。下面是一些可能的解决方案：关闭CSS的压缩和优化：在Vue的配置文件（vue.config.js）中，你可以通过添加以下配置来关闭CSS的压缩和优化：module.exports={css:{extract:false,......
  • tailwindcss 实现常见样式
    设置宽高w-number,h-numberflex实现水平垂直居中flex设置容器为flex容器flex-row/flex-column设置主轴方向justify-center设置主轴方向居中，类似还有justify-start,justify-enditems-center设置交叉轴方向居中，类似还有items-start,items-end画borderborde......
  • css选择器的应用
    css中的选择器有多种,他们的优先级（权重）:标签选择器<class选择器<id选择器<!important1.标签指定选择器div.box{}2.子代选择器ul>li>ol>li{}3.后代选择器ulli{}4.并集选择器box,div,p{}案例：完成以下案例答案：......
  • css的ip选择器与class选择器
    1.class选择器2.id选择器3.效果图4.通配符选择器 *{}......
  • 字符串的一些注意事项
    字符串的一些注意事项如何把数字转换成字符串在Java中，您可以使用多种方法将数字类型转换为字符串类型。以下是一些常见的方法：使用String.valueOf()方法：int number = 42;String str = String.valueOf(number);使用字符串拼接（Concatenation）：int number = 42;Str......
  • 如何通过CSS将高度从0过渡到auto？
    内容来自DOChttps://q.houxu6.top/?s=如何通过CSS将高度从0过渡到auto？你可以尝试使用max-height属性来实现这个效果，而不是使用height属性。这样，在悬停时，<ul>的高度会逐渐增加，而不会出现突然跳跃的情况。以下是修改后的CSS代码：#child0{max-height:0;overflow:hidden......
  • Python eval的用法及注意事项
    eval是Python的一个内置函数，这个函数的作用是，返回传入字符串的表达式的结果。想象一下变量赋值时，将等号右边的表达式写成字符串的格式，将这个字符串作为eval的参数，eval的返回值就是这个表达式的结果。python中eval函数的用法十分的灵活，但也十分危险，安全性是其最大的缺点。本文从灵活......
  • 怎么用 CSS 美化被选中的文字？
    要使用CSS美化被选中的文字，可以使用::selection伪元素选择器来设置样式。该选择器会选中用户在页面上所选中的文本，因此您可以使用它来应用样式来改变文本的外观。例如，要将被选中的文本的背景色设置为黄色，可以使用以下CSS代码：::selection{background-color:yellow;......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99