移动端 - 常见问题及解决方案

最新推荐文章于 2023-07-04 14:59:01 发布
最新推荐文章于 2023-07-04 14:59:01 发布
阅读量267 收藏
点赞数
分类专栏： 移动端 WebApp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wildye/article/details/80141101
版权

1. 视口（viewport）

  • <meta name="viewport" content="...">，参数之间 , 分隔
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  • layout viewport 是网页的所有内容，他可以全部或者部分展示给用户
  • visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。
属性名备注
width设置layout viewport 的宽度，为一个正整数，width-device 表示设备宽度
user-scalable是否允许用户进行缩放，不允许为 no / 0 ，允许为 yes / 1
initial-scale设置页面的初始缩放倍数，1.0 表示不缩放
minimum-scale允许用户的最小缩放倍数，0.8 表示最小缩放0.8倍
maximum-scale允许用户的最大缩放倍数，2.0 表示最大缩放2倍
height设置layout viewport 的高度，这个属性对我们并不重要，很少使用

2. 屏幕旋转（orientation）

仅 QQ 和 UC 支持直接设置

  • QQ 浏览器
<meta name="X5-orientation" content="portrait|landscape">

<!-- 强制竖屏 -->
<meta name="X5-orientation" content="portrait">

<!-- 强制横屏 -->
<meta name="X5-orientation" content="landscape">
  • UC 浏览器
<meta name="screen-orientation" content="portrait|landscape">

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

<!-- 强制横屏 -->
<meta name="screen-orientation" content="landscape">
  • 判断状态（竖屏 or 横屏）
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

function hengshuping() {
    if (window.orientation == 90 || window.orientation == -90) {
        // 横屏
    } else {
        // 竖屏
    }
}

3. 全屏显示（full）

即遮盖浏览器头部信息栏和底部菜单栏

  • QQ
<meta name="X5-fullscreen" content="true" />
  • UC
<meta name="full-screen" content="yes" />

4. 识别电话号码和邮箱

  • 禁止识别电话号码和邮箱
<meta name="format-detection" content="telephone=no, email=no" />
  • 拨打电话和发邮件
href="tel:"
href="mailto:"

5. 默认样式

  • 默认字体设置 Helvetica
    移动端一般没有宋体和微软雅黑，中文字体无需设置
body {
    font-family: Helvetica;
}
  • 清除点击阴影 -webkit-tap-highlight-color
a, input, button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
  • 清除按钮圆角 -webkit-appearance
input, button {
    -webkit-appearance: none;
    border-radius: 0
}
  • 禁止文字缩放 -webkit-text-size-adjust
body *{
    -webkit-text-size-adjust: 100%;
}
  • 选中文字设置 -webkit-user-select
    不兼容安卓
p {
    -webkit-user-select: none;
}
  • Font Boosting
    在一段文字我们没有设置高度时，在webkit内核下，文字的大小被浏览器放大了
/* 给文字设置最大高度 */
p {
    max-height: 36px;
}
  • IOS 下 body的overflow问题
    横向拖动
<html>
    <head></head>
    <body>
        <div id = "wrap">
            <header>头部</header>
            <section>页面内容</section>
        </div>
    </body>
</html>
html {
    height: 100%;
    overflow: hidden;
}
body {
    position: relative;
    margin: 0;
    height: 100%;
    overflow: auto;
}
#wrap {
    height: 100%;
    overflow: auto;
}
header {
    position: absolute;
    width: 200%;
    height: 40px;
    color: #FFF;
    background: rgba(0, 0, 0, .5);
}
section {
    padding-top: 40px;
}

6. 安卓端背景图片模糊问题

  • 用同等比例的图片在PC端很清晰，手机端由于devicePixelRatio的原因，图片显示模糊
  • 使用 2 倍的背景图来代替 img 标签
.logo {
    display:inline-block;
    width:100%;
    height:50px;
    background: url('../images/logo.png') no-repeat center center;
    -webkit-background-size: 50px 50px;
    background-size: 50px 50px;
}

7. 图片加载

  • 图片加载慢，一般用canvas方法加载
  • JS 动态加载
function render(count) {

    var padding = 2,
        winWidth = $(window).width(),
        imgWidth = Math.floor((winWidth-padding*3)/4),
        tmpl ='';

    var imgs = document.createDocumentFragment();

    for (var i = 1; i <= count; i++) {
        var container = document.createElement('canvas');
        container.style.width = container.style.height = imgWidth;
        container.style.paddingLeft = container.style.paddingTop = p;

        tmpl += '<li style="width:' + imgWidth 
             + 'px;height:' + imgWidth 
             + 'px;padding-left:' + p 
             + 'px;padding-top:' + padding 
             + 'px;"><canvas id="cvs_' + i + '"></canvas></li>';
        var img = new Image();
        img.index = i;
        img.onload = function(){
            var cvs = $('#cvs_'+this.index)[0].getContext('2d');
            cvs.width = this.width;
            cvs.height = this.height;
            cvs.drawImage(this,0,0);
        }
        img.src = 'img/'+i+'.jpg';
    }
}

// 加载 5 张图片
render(5);
凝弧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
倾力总结40条常见的移动端Web页面问题解决方案
weixin_34109408的博客
05-30 3224
原文链接：http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=0#wechat_redirect 1.安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很...
常见的移动端兼容问题和解决方案
最新发布
zayyo的博客
09-05 543
9、input为fixed定位，在iOS下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出现在中间位置。8、iOS下input为type=button属性disabled设置true，会出现样式文字和背景异常问题。14、iOS中日期如：2022-02-22 00:00:00格式的时间转时间戳不成功。5、iOS下取消input在输入的时候英文首字母的默认大写。7、在移动端修改难看的点击的高亮效果，iOS和安卓下都有效。1、禁止iOS识别长串数字为电话。
关于h5移动端常见问题整理
Qianmoer的博客
07-04 281
移动端开发页面会左右晃动，这时候我们需要给外层容器加上。；关闭遮罩层时；当我们使用弹性盒子布局时，要想头尾固定，首先要注意必须使容器占满视窗高度，其次使用flex系数进行设置，但是要注意中间内容区必须设置属性，使其可以出现滚动条。input默认样式的问题。关于input很可能会出现andriod和ios的不兼容问题。关于点击之后出现的半透明背景的解决问题，使用关于 在移动端会失效，建议添加空元素，设置宽度进行文字隔开。关于input的坑！
移动端H5网页开发常见问题汇总
苏纯的博客
11-16 2114
前面笔者已经介绍了 2022-移动端H5网页开发必备知识，这篇文章主要是总结下移动端开发常见问题，帮助大家一起避坑。
lib-flexible 移动端适配解决方案
12-20
在移动端开发中，适配不同尺寸的屏幕是一个重要的任务，lib-flexible 是一个常见的解决方案，主要解决了移动设备上的页面布局和元素尺寸的问题。这个库基于 Flexible Box Layout（Flexbox）模型，结合了“viewport ...
详解移动端HTML5音频与视频问题及解决方案
12-02
解决方法是模拟用户触碰事件，先创建一个Audio对象，然后在需要时替换其src属性并播放。以下是一个示例代码片段： ```javascript Xut.fix = Xut.fix || {}; if (Xut.plat.isBrowser && Xut.plat.isIOS) { var ...
less ,移动端less常见问题处理
01-31
本文将深入探讨在移动端项目中使用LESS时可能遇到的常见问题及其解决方案。 首先，我们来了解一下LESS的基本概念。LESS是一种CSS预处理器，它允许开发者使用变量、嵌套规则、混合（mixins）、函数等特性，使CSS编写...
常见的移动端的问题
weixin_30522095的博客
07-05 83
一、什么是Retina显示屏，带来了什么问题 　　1、retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样大小的屏幕上，苹果设备的retina显示屏中，像素点由1个变为4个； 　　2、在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍； 　　3、那么，前端的对应方案是：①设计稿切出来的图片长宽保证为偶...
手机移动端web前端常见问题整理文档
08-18
手机移动端web前端常见问题的处理方法
HTML5 常见面试题之PC端和移动端区别介绍
09-27
小编个人觉得PC端的定位就是用户视觉浏览路线，可以显示较多的内容，而移动互联网终端的定位就是便携。下面是小编给大家带来的html5面试题pc端和移动端区别介绍，感兴趣的朋友参考下
移动端问题集（个人总结整理）
lunar_123的博客
09-10 157
1.禁用IOS设备页面数字自动识别为手机号 <meta name="format-detection" content="telephone=no"> 2.移动端全局禁用复制功能 两种思路：一种是从css方面禁止复制，另一种是从js方面限制手机浏览器的长按菜单功能。 /* user-select */ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-us
HTML5常见面试题及答案（一）
热门推荐
前端学习笔记
01-14 2万+
1、文字超出显示为省略号 //单行： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; //多行： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 2、div垂直居中 posi
移动端常见面试题
qq_39349116的博客
03-19 1752
媒体查询 rem单位 相对于HTML根元素，默认16px bootstrap框架 sass&less&scss
移动端问题总结
m_review的博客
12-02 134
解决移动端 1px 线的问题 &:after { border: 1px solid red; content: ""; position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 2...
H5移动端常见问题
star的博客
05-24 902
html5调用安卓或者ios的拨号功能 html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。 如下： <a href="tel:4008106999,1034">400-810-6999 转 1034</a> 拨打手机直接如下 <a href="tel:15677776767">点击拨打15677776767</a> ...
移动端web解决方案
weixin_34342992的博客
06-27 535
范畴 　　移动端web浏览器。至少需要适配的，UC,QQ,各手机内置浏览器，chrome，safari。 是不是觉得和PC端差不多？错了！每款同一版本ios的内置浏览器一样。但每款同一版本android的不同品牌手机内置浏览器有很多细节上的差别(每个手机运营商称其为优化系统)。何况每款浏览器还有不同版本。所以移动端web的坑远多于PC端。这是它有N多辅助库的原因。 优点是...
常见移动端兼容性问题
yiyueqinghui的博客
11-29 1176
1.IOS移动端click事件300ms的延迟相应 移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。 这是由于区分单机事件和双击屏幕缩放的历史原因造成的。 解决方式： fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题 触摸屏的相应顺序为touchstart–>touchmove–>touchend–>click，也可以通过绑定ontouchstart事件，加快事件的响应，
前端1px问题及解决方案
05-26
在移动端开发中，1px问题是一个常见的难题。由于移动端屏幕像素密度高，所以在CSS中设置1px的边框或者线条时，往往会出现模糊或者变粗的情况，影响用户体验。 以下是几种解决方案： 1. 使用viewport单位 Viewport单位是指基于视口的单位，例如vw、vh、vmin、vmax，它们可以根据设备屏幕宽度自适应缩放，所以可以解决1px问题。例如，可以使用vw单位设置边框宽度。 2. 使用transform: scale() 使用CSS3的transform:scale()属性将元素缩小到原来的1/2或1/3，然后再放大，这样边框或线条就会变得更加细致，不会出现模糊或变粗的情况。 3. 使用border-image 可以使用CSS3的border-image属性来设置边框图片，可以使用一张像素为1的图片来解决1px问题。 4. 使用伪元素 可以使用CSS的伪元素::before和::after来实现细线效果，例如： ``` border: none; position: relative; &::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #000; transform-origin: left bottom; transform: scaleY(0.5); } ``` 以上是一些解决1px问题的方法，可以根据实际情况选择合适的方法来解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值