移动端开发常见问题-1

最新推荐文章于 2022-11-16 18:41:37 发布

Wyliss

最新推荐文章于 2022-11-16 18:41:37 发布

阅读量500

点赞数

文章标签： html

本文链接：https://blog.csdn.net/YhWyl527/article/details/105639108

版权

1.点透问题：见博客

https://blog.csdn.net/YhWyl527/article/details/105637589
2.应储备的知识

4个像素

物理像素(设备像素–dp)：通常指设备的分辨率。物理像素是设备呈像的最小单位

—屏幕尺寸：屏幕对角线的长度。单位为：英寸

—屏幕分辨率：设备横纵方向上像素点的个数。单位：px
—屏幕像素密度(ppi)：每英寸所包含的像素个数

设备独立像素(逻辑像素–dip)

CSS像素(DIPs)：浏览器的最小单位

位图像素：当图片在页面中时，1个位图像素 = 1个CSS像素。位图像素是图像的最小单位

4个视口
—布局视口：为了解决将PC端的页面适配到移动端，将移动端的浏览器的可视区域设为viewport，布局视口决定布局，并且默认情况下它的宽度为980px

—视觉视口：浏览器可视区域，也就是可以人眼可以看见的区域。如果对视觉视口作放大操作，那么视觉视口中的CSS像素个数会减少，一个CSS像素的面积会放大，那么整个视觉视口就变小了

—理想视口：

<meta name="viewport" content="width=device-width">

布局视口的宽度 = 视觉视口的宽度 = 设备独立像素的宽度

—完美视口：
太大元素问题：当一个元素的宽度大于布局视口的宽度时，视觉视口会改变自己的宽度去包裹这个大元素，而不会出现横向滚动条
使用完美视口解决：当加上完美视口的方案后，视觉视口不会改变自己的宽度去包裹大元素，会出现横向滚动条

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


--width=device-width：布局视口的宽度 = 设备独立像素的宽度
--initial-scale=1.0：将布局视口与视觉视口的尺寸调整一致(initial-scale=1.0缩放是参照设备独立像素的)
注：
initial-scale=2.0：将布局视口与视觉视口中的CSS像素放大到原来的2倍，也就是说每一个CSS像素都会放大到原来的2倍，那么整个视口的CSS像素会减少，视口的也会随之变小
initial-scale=0.5：将布局视口与视觉视口中的CSS像素缩小到原来的0.5倍，也就是说每一个CSS像素都会缩小到原来的0.5倍，那么整个视口的CSS像素会增加，视口也会随之变大
user-scalable=no：禁止用户缩放操作
maximum-scale=1.0,minimum-scale=1.0：为了解决user-scalable=no的兼容性问题

width=device-width & initial-scale的矛盾
当布局视口与视觉视口的宽度不一致时，会选择两者中大的那个值作为视口的最终尺寸

2个操作
用户放大操作：放大一个CSS像素的面积页面变大视觉视口变小视觉视口内部所包含的css像素的个数变少

用户缩小操作：缩小一个CSS像素的面积页面变小视觉视口变大视觉视口内部所包含的css像素的个数变多

系统放大操作：放大一个CSS像素的面积页面变大布局视口,视觉视口变小视觉视口内部所包含的css像素的个数变少

系统缩小操作：缩小一个CSS像素的面积页面变小布局视口,视觉视口变大视觉视口内部所包含的css像素的个数变多

1个比例
像素比(DPR)：一个方向上相同设备所占据的物理像素的个数 / 一个方向上相同设备所占据的设备独立像素的个数

物理像素与设备独立像素、CSS像素、位图像素的关系
—物理像素与设备独立像素：一个方向上相同设备所占据的物理像素的个数 / 一个方向上相同设备所占据的css像素的个数 = 一个方向上相同设备所占据的物理像素的个数 / 980

没加<meta name="viewport" content="width=device-width">，布局视口的宽度为980px

—物理像素与CSS像素：一个方向上相同设备所占据的物理像素的个数 / 一个方向上相同设备所占据的css像素的个数

加<meta name="viewport" content="width=device-width">，布局视口的宽度=设备独立像素的宽度，
可以通过 物理像素/设备独立像素=像素比的关系来判断物理像素与CSS像素的关系
如：像素比DPR=2；那么一个物理像素占多少个CSS像素？
横向上：一个物理像素占2个CSS像素
纵向上：一个物理像素占2个CSS像素
那么一个物理像素总共占4个CSS像素

—物理像素与位图像素：当一个位图像素对应上一个物理像素时图片才可以完美清晰的展示

设备独立像素与CSS像素的关系

<meta name="viewport" content="width=device-width">
--width：布局视口的宽度
--device-width：设备独立像素的宽度

根据width = device-width这个等式可得，布局视口的CSS像素就等价于设备独立像素

CSS像素与位图像素的关系
1个位图像素 = 1个CSS像素

禁止用户缩放
user-scalable=no,maximum-scale=1.0,minimum-scale=1.0

3.移动端边框1px问题

 /* 四条边框 */
        /* ul{
            list-style-type:" ";
            padding: 0;
            margin: 0;
        } */
        p{
            list-style-type:" ";
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 20px;
        }
        .box p {
            position: relative;
            width: 20px;
            height: 20px;
            /* margin-bottom: 20px; */
            border: none;
        }

        .box p:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #000;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            /* 缩小后宽高变为原来一半再将其扩大这样与原来宽高相同 */
            width: 200%;
            height: 200%;
            /* 缩小0.5倍 */
            -webkit-transform: scale(0.5); 
             transform: scale(0.5);
            /* 基点设为左上角不然会跑偏 */
            -webkit-transform-origin: left top;
            transform-origin: left top;
        }


        /* 单条边框 */
        /* .box li {
            position: relative;
            border: none;
        }

        .box li:after {
            content: '';
            position: absolute;
            left: 0;
            background: #000;
            width: 100%;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        } */

4.头部信息

1.DOCTYPE(Docment Type)：此标签告知浏览器文档使用哪种html或者 xhtml 规范，不区分大小写，HTML代码：

<!DOCTYPE html><!-- 使用HTML5 DOCTYPE 不区分大小写 -->

2.lang：此属性放在标签中用于设置文档的语言类型(英语:en；中文:zh等)，HTML代码：

<html lang="en">
...
</html>

3.charser：声明文档使用的字符编码(GBK，UTF-8)，HTML代码：

<meta charset ="UTF-8">

4.format-detection(识别规则)→content参数(默认都是yes)：

telephone：数字转化为拨号链接(yes/no)——no：禁止把数字转化为拨号链接，yes：开启把数字转化为拨号链接；

email：识别邮箱(yes/no)——no：禁止作为邮箱地址，yes：开启把文字默认为邮箱地址；

adress：点击地址跳转至地图——no：禁止跳转至地图，yes：开启点击地址跳转至地图的功能；

<meta name="format-detection" content="telephone=no,email=no ,,adress=no"/>

5.viewport(针对移动设备) →content 参数：

width：viewport宽度；height：viewport 高度(通常可以不设置)；initial-scale：初始缩放比例；maximum-scale：最大缩放比例；minimum-scale：最小缩放比例；user-scalable：是否允许缩放(yes/no)

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

6.SEO优化：

title(页面标题)：your title

keywords(页面关键词)：

description(页面描述)：

author(网页作者)：

robots(网页搜索引擎索引方式)：robotterms是一组使用逗号(,)分割的值，通常取值：

none：搜索引擎将忽略此网页，等同于noindex，nofollow；

noindex：搜索引擎不索引此网页；nofollow：搜索引擎不继续通过此网页的链接索引搜索其它的网页；

all：搜索引擎将索引此网页与继续通过此网页的链接索引，等同于index，follow；

index：搜索引擎索引此网页；follow：搜索引擎继续通过此网页的链接索引搜索其它的网页；

<meta name="robots" content="index,follow"/>
<!-- ps：如果网页没有提供robots，搜索引擎认为网页的robots属性为all(index和follow -->

5.移动端开发常见兼容性：

1.H5页面窗口自动调整到设备宽度，禁止用户缩放

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

2.忽略将页面中的数字识别为电话号码(ios设备容易出现)

<meta name="format-detection" content="telephone=no"/>

3.忽略页面中对邮箱地址的识别(android设备容易出现)

<meta name="format-detection" content="email=no"/>

4.上下拉动滚动条时卡顿

body{
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
}

5. 禁止复制，选中文本

body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -khtml-user-select:none;
    user-select:none;
}

6.长时间按住页面出现闪退

html{
    -webkit-touch-callout:none;
}

7. IOS/Android触摸元素时出现半透明灰色遮罩

html{
    -webkit-tab-highlight-color:rgba(255,255,255,0);
}

8. 伪类 :active失效

方法一：

<body ontouchstart=””><!-- 给body添加 ontouchstart -->

方法二：js给document绑定 touchstart 或 touchend 事件 document.addEventListener(‘touchstart’,function(){},false);

9. 降级处理(CSS3)

if('transition' in document.documentElement.style){
    console.log(‘支持transitioin’);
}else{//这里进行降级处理，调用不同的CSS
    console.log(‘不支持transition’);
}

10.旋转屏幕时，调整字体大小

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
    -webkit-text-size-adjust:100%;
}

11.某些Android圆角失效

background-clip:padding-box;

12.IOS中input键盘事件支持不是很好(通过html5的oninput达到类似 keyup 的的效果)

document.getElementById('inputId').addEventListener('input',function(e){
    var e = e || event;// 浏览器兼容性处理
    var value = e.target.value;
    console.log(value);
});

13.消除IE里面那个叉号

input:-ms-clear{
    display:none;
}

14. IOS设备上输入框默认内阴影

html{
    -webkit-appearance:none;
}

15.IOS设置input按钮样式会被默认样式覆盖

input,textarea{
    border:0;
    -webkit-appearance:none;
}

16. IOS键盘字母输入，默认首字母大写

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

17. input 类型设置为 number 的问题：

—17-1.maxlength属性用不了：

   <input type="number" oninput="checkLength(this,5)"/>

function checkLength(obj,length){
    if(obj.value.length > length){
    　　obj.value = obj.value.substr(0,length);
    }
}

17-2.设置step(默认为1)：

<input type="number" step="0.01"/>

17-3.去除input默认样式

input[type=number]{
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}

Wyliss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端开发常见问题-1

1.点透问题：见博客https://blog.csdn.net/YhWyl527/article/details/1056375892.应储备的知识4个像素物理像素(设备像素–dp)：通常指设备的分辨率。物理像素是设备呈像的最小单位—屏幕尺寸：屏幕对角线的长度。单位为：英寸—屏幕分辨率：设备横纵方向上像素点的个数。单位：px—屏幕像素密度(ppi)：每英寸所包含的像素个数设备独立像...
复制链接

扫一扫