自己第一次做手机web页面的一些总结

一、   移动端web开发的单位

1. 单位

先来罗列下学习移动页面构建的过程中可能看到过一些单位:

px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……

对上诉单位简单做个分类,并对其中一些关系进行比较

(1)什么是绝对长度单位?什么是相对长度单位?

绝对长度单位:in(inch英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(派卡 四号字体尺寸)。关系1in = 2.54cm = 25.4 mm = 72pt = 6pc,

网页中应用比较少。

相对长度单位:是手机网页设计中使用最多的长度单位,包括rem、px、em等。

px:在手机中和电脑一样是基于分辨率,但手机上同时4.7寸屏幕的分辨率:可以是1- 3倍像素,iphone 6和7是2倍像素,iphone 6plus和7plus为2.6倍像素,安卓手机中低档一般为2倍像素,高端机一般会做到3倍像素,对于做各种机型兼容px是无法满足的;如使用px作为基本上每个手机上显示的都会有差异

em:em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。对于页面中有多种字体大小的不适合;而rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。

rem:是基于一个根尺寸,最小只能设置12px,在media中指定不同分辨率下的根尺寸所有尺寸都以它为基准计算;用rem的好处是你写样式的时候长度只需要写一次,而且在开发工具上安装rem和px的转换工具可以自动转换,(在4.7屏幕设置基准值为16px是一个比较好的转换值,这样5.2为18,5.7为20,6.2为22)

 

(2)什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?

屏幕尺寸:指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、4.7、5.0、5.2、5.5、5.7、6.0等。目前  基本上是4.7起的屏幕

《自己第一次做手机web页面的一些总结》

屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率,如1960*1080(红色点)蓝色点为1dp

《自己第一次做手机web页面的一些总结》

屏幕像素密度:屏幕上每英寸可以显示的像素点的数量,单位是dpi或ppi。在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。

最明显的就是iPhone 3GS和iPhone 4的区别。屏幕尺寸一样,屏幕分辨率相差一倍,屏幕像素密度也相差一倍。

 《自己第一次做手机web页面的一些总结》《自己第一次做手机web页面的一些总结》

计算像素密度的公式:

勾股定理算出对角线的分辨率:√(1920^2+1080^2)≈2203px

对角线分辨率除以屏幕尺寸:2203/5≈440dpi

(3)什么是dp、sp、ppi、dpi、dip、mdpi、hdpi、xdpi、xxdpi?

这些单位主要用于手机app使用,对于手机web页面并不识别

ppi和dpi:屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度。ppi和dpi是同一个概念,Android比较喜欢使用dpiiOS比较喜欢使用ppi

dp、dip:都是密度独立像素,可以想象成是一个物理尺寸,使同样的设置在不同手机上显示的效果看起来是一样的。

mdpi、hdpi、xdpi、xxdpi:

像素密度:简单点就是非高清屏、高清屏、超高清屏。(dpi值越大越清晰)

dpi和转换参数的关系:

dpi我们都知道,是指像素密度;转换参数是指,dp与px之间的转换系数。

如下图,dp指蓝色块,px指红色块,很明显密度更大的右图中每个dp含有的px个数更多。可以得出结论:dpi密度越大,转换参数越大。  dp = (DPI/(160像素/英寸))px 

《自己第一次做手机web页面的一些总结》

所以对于不同分辨率的值dp也是固定的

对于apk最好使用的单位是dp而对于手机web页面最好使用的是rem

并且假设pc端和手机端的交互和页面设计变动不大的情况下使用rem完全可以只写一套页面,一套样式

对于手机端设计的图标通常分辨率会是2倍图或者3倍图来做的,这点要问清设计师

并且这段 meta标签很重要

<metaname=”viewport” content=”user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0″>

user-scalable:用户是否可手动缩放

width=device-width:设置像素和屏幕等宽

initial-scale=1.0:像素宽度和屏幕宽度的比值

二、    移动端web开发的调试

1. chrome浏览器的Toggle device toolbar调试工具可以模拟手机端的请求,对刚开始手机端页面布局也有较好的帮助

2. chrome ToDevice插件,pc和手机登录同一谷歌账号,可将pc网页地址推送至手机端,手机输入网址太麻烦了

3. Hbulider 前端开发工具:做html页面时使用该工具可以立即看到更改后的效果,对于调整页面细节使用这个还原度100%。在手机浏览器输入在Hbulider生成的html页面地址即可访问

4. 需要测试后台数据时俩中方式;手机root安装host工具绑定host;pc上安装Fiddler,设置端口号,手机上wifi设置中设置动态代理,ip为pc的ip端口号为Fiddler设置的

5.调试js时:手机和电脑usb连接,手机开启开发者模式,手机和电脑都安装chrome浏览器,手机chrome浏览器打开,pc chrome上地址栏输入:chrome://inspect/#devices;可在pc上控制手机chrome浏览器的运行,手机chrome浏览器上的事件响应可以反应到pc上,这样就可以在pc端上调试手机上的web页面了

开发时使用1+2+3基本就可以,当事件响应有差异时才需要使用5,前后端测试时使用4

三、    移动端web开发中一些兼容性做法

1.  手机端的按钮复制功能兼容性比较好:clipboard.js

2.  禁止页面自动识别手机号码:<metaname="format-detection" content="telephone=no">

3.禁止复制选中文本:Element {

  -webkit-user-select: none;-moz-user-select: none;

-khtml-user-select: none;user-select: none;

}

3.  ios系统输入框阴影: -webkit-appearance: none; 

4.  a标签的active兼容处理 即 伪类:active失效:<body ontouchstart="">

5.  keyup进行表单验证时手机对复制的内容无响应:手机对keyup、keydown、keypress支持不是很好,表单验证时同时监听keyup和input事件

对input type=’number’类型,maxlength无效,只能通过keyup动态获取长度多余的去除,但是对于可输入+-.这3个符号暂无比较好的处理方法;祛除number输入框默认样式:

input[type=number]{ -moz-appearance:textfield;}

input[type=number]::-webkit-inner-spin-button, 

input[type=number]::-webkit-outer-spin-button{

        -webkit-appearance: none;

        appearance: none;

        margin: 0;

}

6. 当input输入框被软键盘遮挡时:输入框自动往上弹,兼容性比较好的方法是:document.getElementById(“account”).scrollIntoView(true);键盘弹出时是个延时过程加载调用该方法时需增加延时,同时对body{margin-bottom:150px}

 

 

    原文作者:ylg01
    原文地址: https://blog.csdn.net/ylg01/article/details/72628528
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞