一些移动端开发技巧

最新推荐文章于 2023-04-06 09:46:24 发布

豆子前端

最新推荐文章于 2023-04-06 09:46:24 发布

阅读量641

点赞数

分类专栏：前端文章标签： css css3 javascript

本文链接：https://blog.csdn.net/qq_41996454/article/details/126942164

版权

前端专栏收录该内容

175 篇文章 11 订阅

订阅专栏

移动端开发技巧

http://t.zoukankan.com/john-sr-p-5721126.html

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

文本的处理

1、关闭iOS键盘首字母自动大写

<input type="text" autocapitalize="off" />

2、单行文本溢出

.xx{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

3、多行文本溢出

.xx{
    display:-webkit-box !importmort;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;(数字2表示隐藏两行)
}

常用的移动端开发框架以及工具

框架
移动端基础框架
　　zepto.js 语法与jquery几乎一样，会jquery基本会zepto
　　iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能
　　underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
　　fastclick 加快移动端点击响应时间
　　animate.css CSS3动画效果库
　　Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

滑屏框架
　　适合上下滑屏、左右滑屏等滑屏切换页面的效果
　　slip.js
　　iSlider.js
　　fullpage.js
　　swiper

移动端1px问题

一般来说,在桌面的浏览器中,设备像素比（dpr）等于1,一个css像素就是代表的一个物理像素。而在移动端,大多数机型都不是为1,其中iphone的dpr普遍是2和3,那么一个css像素不再是对应一个物理像素,而是2个和3个物理像素。故css设置1px,实际产生的物理像素会变大,使得1px的效果更大。

解决方案如下

方案一通过dpr控制缩放比例

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .scale::after {
        display: block;
        content: '';
        border-bottom: 1px solid #000;
        transform: scaleY(.5);
    }
}

@media all and (-webkit-min-device-pixel-ratio: 3) {
    .scale::after {
        display: block;
        content: '';
        border-bottom: 1px solid #000;
        transform: scaleY(.333);
    }
}

方案二小数值px

<body>
    <div id="main" style="border: 1px solid #000000;"></div>
</body>
<script type="text/javascript">
    if (window.devicePixelRatio && devicePixelRatio >= 2) {
        var main = document.getElementById('main');
        main.style.border = '.5px solid #000000';
    }
</script>

方案三 viewport和rem结合

手淘采用这这种方案使用Flexible实现手淘H5页面的终端适配

https://github.com/amfe/article/issues/17

在devicePixelRatio=2设置meta
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio=3设置meta
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

通过js

const dpr = window.devicePixelRatio
const meta = document.createElement('meta') // 创建meta视口标签
meta.setAttribute('name', 'viewport') // 设置name为viewport
meta.setAttribute('content', `width=device-width, user-scalable=no, initial-scale=${1/dpr}, maximum-scale=${1/dpr}, minimum-scale=${1/dpr}`)

demo

用JS根据屏幕尺寸和dpr精确地设置不同屏幕所应有的rem基准值和initial-scale缩放值，这个JS方案已经在完美解决了1px细线问题

设计稿是750,采用1：100的比例,font-size为100 * (docEl.clientWidth * dpr / 750)

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用，解决图片模糊问题和1px细线问题
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

方案四 scale

如果在一个元素上使用scale时会导致整个元素同时缩放，所以应该在该元素的伪元素下设置scale属性

.scale::after {
    display: block;
    content: '';
    border-bottom: 1px solid #000;
    transform: scaleY(.5);
}

方案五白色背景障眼法

div.linear::after {
    display: block;
    content: '';
    height: 1px;
    background: linear-gradient(0, #fff, #000);
}

方案六 box-shadow

使用box-shadow模拟边框

Safari下不支持

div.shadow {
    box-shadow: 0 0.5px 0 0 #000;
}

.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

方案七 SVG

SVG的描边等属性的1px是物理像素的1px

//火狐需要把svg颜色用black英文表示，不支持其他颜色表示方式
.svg::after {
    display: block;
    content: '';
    height: 1px;
    background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1px"><line x1="0" y1="0" x2="100%" y2="0" stroke="#000"></line></svg>');
}

//svg也可用base64表示
.svg::after {
    display: block;
    content: '';
    height: 1px;
    background-image: url('data:image/svg+xml;utf-8,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjFweCI+PGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTAwJSIgeTI9IjAiIHN0cm9rZT0iYmxhY2siPjwvbGluZT48L3N2Zz4=');
}

方案八伪元素+transform

构建1个伪元素, border为1px, 再以transform缩放到50%

优点：可以满足所有场景，且修改灵活。缺点：对于已使用伪类的元素要多层嵌套。

/* 设计稿是750,采用1：100的比例,font-size为100*(100vw/750) */
.border-1px {
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-1px:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        border-top: 1px solid #D9D9D9;
        color: #D9D9D9;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

移动端click事件延迟300ms问题

07年，苹果公司发布首款Iphone前夕，遇到一个问题：当时的网站都是为大屏设计，手机屏幕太小无法正常浏览，于是苹果工程师做了一些约定解决此类问题。

这些约定当中，最为有名的是双击缩放（double tap to zoom）,这是产生300ms延迟的根源。
用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。如果用户在 iOS Safari里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。由此产生了300ms延迟问题。

在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms延迟严重影响了用户体验。

解决方案如下

方案一禁用缩放

在html文档头部的meta标签中加入如下语句：

 <!-- 1.禁用缩放 user-scalable=no -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

user-scalable=no表明这个页面不可缩放，也就是浏览器禁用的双击缩放事件并且同时会去掉300ms点击延迟。但这个方案也有缺点，就是完全禁用了双击缩放，当我们需要放大文字或者图片时无法满足我们的需求。

方案二封装一个处理函数

//封装tap解决click 300ms 延时
function tap (obj,callback) {
    var isMove = false;//记录手指是否移动
    var startTime = 0;//记录手指触摸的时间
    obj.addEventListener('touchstart',function(e){
        startTime = Date.now();//记录触摸时间
    })
    obj.addEventListener('touchmove',function(e){
        isMove = true;//查看手指是否滑动
    })
    obj.addEventListener('touchend',function(e){
        if(!isMove && (Date.now()-statrTime) < 150){
            callback && callback();
        }
        isMove = false;//取反 重置
        startTime = 0;
    })
};
tap(div,function(){ //执行代码 }）；

这个代码可以监测元素点击发生时的状态，从而避免300ms的延迟。
但这个方法有一个弊端，一次只能给一个元素去解决问题。

点击穿透问题

可能有人会想，既然click点击有300ms的延迟，那对于触摸屏，直接监听touchstart事件不就好了吗？

使用touchstart去代替click事件有两个不好的地方。

touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件，这不是我们想要的结果；
使用touchstart事件在某些场景下可能会出现「点击穿透」的现象。

什么是点击穿透？

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。于是我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。

这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。