精华内容
下载资源
问答
  • 移动端开发

    2020-03-26 22:54:33
    移动端开发 我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站。 app:application应用程序。 手机软件:主要指安装在智能手机上的软件,完善原始系统的不足与个性化。 ...

    移动端开发

    我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站。

    app:application应用程序。

    手机软件:主要指安装在智能手机上的软件,完善原始系统的不足与个性化。

    移动端开发是与PC端肯定是有很大不同的,所以我们需要学习如何在移动设备上开发完美适配的app

    开发移动端应用我们需要学习的知识点可以分成如下几个:

    1. 移动端布局适配

    2. 移动端事件

    3. 移动端交互效果

    4. 移动端前端框架

    5. 移动端调试

    移动端布局适配

    从屏幕尺寸、屏幕类型等方面来看的话,移动设备和PC设备大有不同,所以从布局、适配等方面都需要我们考虑到

    Viewport视口的作用 (在移动端浏览器上面用来显示网页的那一块区域)

    在很久以前,我们的设备还不是智能设备的时候,设备访问智能访问到网页的左上角(当时都是pc网站),查看全部内容需要通过滚动条

    慢慢的我们发现,我们的一个页面放到移动端中访问的时候,没有滚动条了,但是内容都缩小了

    这是因为我们有了一个叫做viewport的一个东西

    网页不是直接放入浏览器中的,而是先放入到viewport中,然后viewport在等比缩放到浏览器的宽度,放入浏览器,viewport在缩放的过程中,网页内容也被缩小了

    网页访问到的clientWidth其实是viewport的宽度

    这样的话我们需要做一些处理,其实问题的根源在于viewport的宽度和浏览器宽度不一样,如果我们能将其设置为一样的话,不会出现这样的问题了

    我们可以通过meta标签来设置viewport将其设置为浏览器的宽度,也就是设备的宽度,这样的话布局就会简单多了

    viewport的宽度

    当浏览器宽度小于980的时候,宽度就是980,当浏览器尺寸宽度大于980的时候,宽度和浏览器宽度一致

    通过meta标签来设置viewport
    标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

    meta标签大全

    meta viewport 的6个属性:

    width 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
    initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale 设置页面的最小缩放值,为一个数字,可以带小数
    maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
    height 设置layout viewport 的高度,这个属性并不重要,很少使用
    user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

    移动端布局方式与设计图

    现有的布局方式:

    1. 固定布局,每一个元素都是固定的尺寸,内容区域居中在浏览器中间

      内容区域的尺寸:980,1000,1100,1200

    2. 响应式布局,利用媒体查询来实现不同尺寸的浏览器显示结构不一样 @media 根据浏览器分辨率大小进行适配

      一般会有三张设计图,PC,平板,手机

    3. 自适应布局,属于响应式里的一种,利用rem、百分比、vwvh等布局单位来实现

      设计图一般只有一张,640、750居多

    移动端布局

    移动的屏幕和PC的屏幕有一个很大的区别,移动端是视网膜高清屏(Retina)

    retina屏幕有一个属性叫DPR(设备像素缩放比) = 物理像素/逻辑像素

    例如,iphone 6手机商宣传手机的尺寸是:750宽,这个值就是物理像素,而从开发者眼里我们所指的其实是375px(逻辑像素)

    在dpr为2的手机中,我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染

    如果不管dpr的话,其实我们布局依然可以,因为我们设置一个像素宽高的东西的话,在手机上看见的基本也就是这么大,至于手机设备用多少个物理像素去渲染,大小还是不会变化的

    设计师出图都是2倍的,是因为,在页面中除了字体(矢量图)大部分都是位图,也就是如果一个像素宽高的盒子里准备放入图片,如果图片的尺寸也是一个像素宽高的话,因为其实在移动端渲染的时候是用四个像素来渲染,图片会失真,但是如果我们给一像素宽高的盒子放入2像素宽高的图片的话,就不会失真

    布局单位

    因为我们的移动设备有很多种,所以我们的布局不可能是固定布局,所以我们要使用自适应布局

    我们在开发中可以选用很多自适应布局单位,这些单位必须满足一个条件

    1. %

      优点:简单,无需设置,兼容性好
      缺点:基于父元素的属性来设置,如果父元素没有宽高,设置无效

    2. vwvh

      一个vw等于viewport宽度的百分之一,一个vh等于viewport高度的百分之一
      vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个

      优点:简单,无需设置
      缺点:兼容性不好

    3. rem

      一个rem等于根元素(html)的字体大小,兼容性很好

      优点:兼容好,使用简单
      缺点:需要设置

    rem与适配

    当我们想使用一个自适应单位的时候,发现%有缺陷,vwvh兼容性差,弹性盒所针对的是元素排列的问题,只适用于某种情况,所以我们就想,能给我一个没啥上面的缺陷的单位,想到了rem

    rem的兼容性好一点,它也确实是一个布局单位,不受父子元素的影响,设置了rem之后,也不会对px、em等单位造成影响,它是一个理想的单位

    rem也有一个致命的问题,就是它不是一个自适应的单位,不会跟着设备尺寸不同而不同,但是没有关系,我们有万能的js,可以去动态的设置它

    方法1:

    我们可以将1rem设置成屏幕的某一个比例,比如将1rem设置成屏幕的十分之一

    假设我们的设计图是640宽的,我们拿到之后量了一下a的宽度为480px,得到比例a所占屏幕3/4,根据rem与屏幕的关系,最后设置成7.5rem

    就是说在设置元素的宽度是时候,会根据设定好的比例关系去进行换算

    方法2:

    如果设计图是640的图,这个时候我们知道它是照着i5来的,我们现在假设世界上所有的手机都是320的,也就是每一个人用的都是i5,在这个理想的情况下,因为手机都一样,尺寸都一样,和pc端的固定布局也就一样了

    假设有一个在640的图上我们量得的宽度是320,因为是二倍图,所以我们知道,它的实际宽度是160px,这样的话,我们直接给这个设置设置width:160px就可以了,这个时候,我们玩个花子,不要单纯的使用px来设置,用rem来设置,例如,我可以将rem设置为100px,这样的,刚才的盒子设置为width:1.6rem,算法就是 量的宽度/(dpr*100) = 要设置的rem值

    这样我们就可以开心的开发,量一个尺寸,除个2,再小数点推两位,设置就行了,但是我们也知道,手机的尺寸并不可能都是320,这样的话,没有关系,我们可以根据一个比例来算rem到底设置为多少

    在手机宽度为320的时候,我们设置的1rem=100px,所以有一个比例 b = 100/320

    那么在W宽度的手机上,1rem应该是多少呢?设为x 那么x/w = b

    得到x = w/3.2

    那么就不要写死html的fontsize为100了。而是用js去设置:

    document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + 'px’

    这样,我们就可以得到一个自适应的rem

    常见的需要注意的问题
    1. 1px边框

      在移动端中,如果给元素设置一个像素的边框的话,那么在手机上看起来是会比一个像素粗的。

      解决方法:使用伪类元素模拟边框,使用transform缩放

    2. 响应式图片

      在移动端中,图片的处理应该是很谨慎的,假设有一张图片本身的尺寸是X宽,设置和包裹它的div一样宽,如果是div宽度小于图片宽度没有问题,但是如果div宽度大于图片的宽度,图片被拉伸失真

      解决方法:让图片最大只能是自己的宽度

        img{
            max-width: 100%;
            display: block;
            margin: 0 auto;
        }
    
    移动端webkit

    移动端的浏览器的内核百分之99都是webkit内核


    移动端事件

    移动端中的事件和PC的事件有一些是不同的,例如,mouse部分事件在移动端里没有了

    取而代之的是touch事件:

    touchstart/touchmove/touchend/touchcancel(玩游戏 忽然来电话)

    添加事件的时候可以用ontouchstart,但是有的时候很可能失效,建议使用addEventListener的方式

    touchcancel比较少见,在系统取消触摸的时候触发

    touch事件对象里面的属性和mouse的略有不同,例如在mouse事件里可以直接从事件对象里取出pageX,clientX,screenX

    touch事件对象里有touches,changedTouches,targetTouches三个属性,上面保存着关键的位置信息

    它们里面保存的是触发事件的手指的信息,但是要注意,虽然三个里面保存的信息看似都一样,但是在touchend事件里,只能使用changedTouches

    click的300ms延迟问题

    在移动端中,click事件是生效的,但是它有一个问题,点击之后会有300ms的延迟响应

    原因:safari是最早做出这个机制的,因为在移动端里,浏览器需要等待一段事件来判断此次用户操作是单击还是双击,所以就有click300ms的延迟机制,Android也很快就有了

    1. 不用click,用自定义事件tap

      tap是需要自定义的:如果用户执行了touchstart在很短的时间又触发了touchend,且两次的距离很小,而且不能触发touchmove

      使用zepto类库的时候,里面自带tap事件,,但是需要在zepto.js后面加上一段js

      zepto官网;Touch模块

      百度有一款touch.js的插件教程

      hammer.js也是一个手势事件库文档

    2. 引入fastclick库来解决

    点透bug的产生

    点透bug有一个特定的产生情况:

    当上层元素是tap事件,且tap后消失,下层元素是click事件。这个时候,tap上层元素的时候就会触发下层元素的click事件

    解决方式:

    1. 上下层都是tap事件,缺点:a标签等元素本身就是自带的click事件,更改为tap比较困难
    2. 缓动动画,让上层元素消失的时候不要瞬间消失,而是以动画的形式消失,事件超过300ms就可以了
    3. 使用中间层,添加一个透明的中间元素,给它添加click事件并消失,这个时候接收点透的是透明的中间层
    4. 使用fastclick

    移动端测试

    1. 使用chrome浏览器有移动设备模拟功能,在这里可以做一些模拟测试,但是要注意的是,毕竟不是真机,会有一些测试不到的问题

    2. 手机连接上电脑的无线,总之使其在同一个网络里,然后就可以通过ip访问

    需要测试的浏览器:

    chrome,firefox,UC,百度,QQ,微信,Android,safari

    移动端交互

    动画效果全部使用css3

    JQ生成二维码

    可以使用jquery.qrcode.js插件,可以快速的生成基于canvas绘制的二维码

    兼容查阅网站

    can i use ,在这里可以查看很多属性、api的兼容性

    展开全文
  • React 移动端开发样式问题记录

    万次阅读 2020-09-07 14:21:04
    React 移动端开发样式问题记录 1、 input 输入框无法聚焦输入文字 将样式中的 user-select: none; 更改为 user-select: text !important; 2、 背景设置 transparent 无效 经过 IOS 真机测试,transparent 在移动端...

    React 移动端开发样式问题记录

    1、 input 输入框无法聚焦输入文字

    将样式中的 user-select: none; 更改为 user-select: text !important;
    

    2、 背景设置 transparent 无效

    经过 IOS 真机测试,transparent 在移动端支持不好,
    将 transparent 更改为 rgba(0, 0, 0, 0) 等效透明效果即可
    

    3、 设置了 backdrop-filter: blur(20px) 后,模糊效果出现位置偏移情况

    box-shadow 属性的位置偏移值影响了 backdrop-filter 的位置,
    可以将 box-shadow 的偏移设置为 0,
    或者直接取消 box-shadow,设置为 box-shadow: none; 即可
    

    4、 设置了 background-attachment: fixed 后,背景图片位置不固定

    background-attachment: fixed; 对移动端支持也不友好,
    可以另外设置一个 <img /> 组件来充当背景图片,
    将 <img /> 设置为 position: flixed; 即可达到相同效果。
    

    5、 可以借助 animejs 等插件来辅助自己开发动画效果

    展开全文
  • 移动端开发视频

    2019-07-22 22:07:46
    资源名称:移动端开发视频资源目录:移动端实战系列视频教程移动前端开发视频下载学习视频软件必看 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
  • 移动端开发源码demo

    2018-05-28 16:23:42
    移动端开发源码demo
  • TensorFlow Lite移动端开发

    千人学习 2019-11-04 13:33:15
    伴随着深度学习技术的广泛使用,越来越多的深度学习模型被部署到移动端或IoT设备上运行,对于从事人工智能研发的相关人员,掌握对应的移动端开发技术是十分必要的,也将对自己的职业生涯产生极大的促进作用!...
  • 移动端开发绪论

    2021-01-17 19:36:31
    移动端开发基础 通常移动端开发主流方案一共有两种 一种是单独制作移动端页面,目前在市场上是主流方案 还有一种是响应式页面兼容移动端这种虽然不是主流方案,但是应用这种开发方案的也不是没有. 我们访问移动端...

    移动端开发绪论

    今天开始,我们步入移动web前端开发的模块,在我们学习移动端开发之前,我们先来了解一下移动端开发的基础常识!

    通常移动端开发主流方案一共有两种

    • 一种是单独制作移动端页面,目前在市场上是主流方案
    • 还有一种是响应式页面兼容移动端这种虽然不是主流方案,但是应用这种开发方案的也不是没有.

    我们访问移动端页面可以通过以下两种方式进行访问:

    • 网址域名加m(mobile)就可以直接访问页面的移动端页面

    • 使用移动设备,进行访问,则可以直接跳转到移动端页面

    又到了我们最头疼的浏览器的兼容性问题

    • 移动端浏览器基本以webkit内核为主,因此我们只需要考虑webkit兼容性问题即可。

    • 移动端浏览器中我们可以放心使用H5标签和CSS3样式,这两者不会引起浏览器的兼容性问题。

    • 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

    在移动端中我们会大量使用 CSS3盒子模型box-sizing

    因为传统模式和CSS3这两种盒子模型,CSS3更适合我们的移动端开发.

    • 传统模式盒子宽度计算:盒子的宽度 = CSS中设置的width + border + padding
    • CSS3盒子模型宽度计算:盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

    通过以上可以得出,我们的CSS3中的盒子模型, padding 和 border 是不会撑大盒子的

    在我们的移动端可以全部使用CSS3 盒子模型

    PC端如果需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择 CSS3 盒子模型

    了解完移动端基础常识以后,后面我会为大家陆续更新移动端的布局以及一些典型的案例来帮助大家深入了解移动端的开发!希望大家继续关注!一起努力!

    展开全文
  • 移动端开发基础

    2021-01-18 15:29:06
    移动端开发基础 通常移动端开发主流方案一共有两种 一种是单独制作移动端页面,目前在市场上是主流方案,还有一种是响应式页面兼容移动端这种虽然不是主流方案,但是应用这种开发方案的也不是没有. 我们访问移动端页面...

    移动端开发基础

    通常移动端开发主流方案一共有两种
    一种是单独制作移动端页面,目前在市场上是主流方案,还有一种是响应式页面兼容移动端这种虽然不是主流方案,但是应用这种开发方案的也不是没有.
    我们访问移动端页面可以通过以下两种方式进行访问:
    网址域名加m(mobile)就可以直接访问页面的移动端页面 使用移动设备,进行访问,则可以直接跳转到移动端页面
    又到了我们最头疼的浏览器的兼容性问题
    移动端浏览器基本以webkit内核为主,因此我们只需要考虑webkit兼容性问题即可。 移动端浏览器中我们可以放心使用H5标签和CSS3样式,这两者不会引起浏览器的兼容性问题。 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可
    在移动端中我们会大量使用 CSS3盒子模型box-sizing
    因为传统模式和CSS3这两种盒子模型,CSS3更适合我们的移动端开发.
    传统模式盒子宽度计算:盒子的宽度 = CSS中设置的width + border + paddingCSS3盒子模型宽度计算:盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
    通过以上可以得出,我们的CSS3中的盒子模型, padding 和 border 是不会撑大盒子的
    在我们的移动端可以全部使用CSS3 盒子模型
    PC端如果需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择 CSS3 盒子模型

    展开全文
  • web前端移动端开发网站源码
  • 前言:移动端开发与普通PC端开发不同,需要实现布局自适应,适配各个型号的手机屏幕大小,还需要解决不同的手机操作系统(主要是Android与iOS)的兼容性问题。 一、实现布局自适应,主要有以下三种布局方式 流式...
  • 移动端开发规范

    千次阅读 2019-08-16 10:13:23
    移动端开发规范 引言:最近得空,整理一些平时工作中要求的开发规范,浅薄之处还请大家多指教。 目录 移动端开发规范 代码规范 基本原则 代码清晰 一致性 通用规范 类命名 方法命名 变量命名 常量...
  • 关于移动端开发

    2019-06-24 20:57:21
    移动端开发 我们可以叫做webapp,其实就是运行再移动端浏览器中的web网站 开发移动端应用我们需要学习的知识点可以分成如下几个: 移动端布局适配 移动端事件 主要是touch事件的使用 移动端交互效果 移动端前端...
  • 移动端开发方案 单独移动端页面(主流) 通常情况下,网址域名前面加 m(mobile) 可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。 比如:京东商城手机版、淘宝触屏版、苏宁易购手机版 ...
  • 移动端开发所需的简历模板,有了这个简历模板,可以快速创建简历,方便找工作时使用
  • light7,专业的移动端开发框架,适合开发移动端UI,light7,专业的移动端开发框架,适合开发移动端UI。
  • 移动端开发新趋势Flutter系列文章
  • 资源名称:03-妙味移动端开发视频资源目录:移动端实战系列视频教程移动前端开发视频 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
  • 移动端开发模式

    2017-08-30 19:21:25
    移动端开发模式现今流行的移动端开发模式共有三种: web(H5) Hybrid(混合开发) Native(原生) 下面来剖析一下三种模式的优缺点:1.开发难度: 无疑web和Hybrid难度要小于原生app开发,而且可以利用现有的Web开发...
  • 移动端开发浅析

    2017-12-05 20:56:00
    5、移动端开发调试 这里主要讲解第一点。在移动端适配中,不得不提到viewport和布局方式: viewport是视口,他的显示情况如下: 1、网页会先放到viewport中 2、viewport缩放到浏览器尺寸 3、viewport放入...
  • 在移动端页面开发中,经常会去封装一个遮罩层(全屏弹窗),遮罩层(全屏弹窗),遮罩层(全屏弹窗)的组件,但是如果是固定定位的...移动端开发遮罩层(弹窗)防止滚动穿透完美解决方案 首先,pc的肯定直接就...
  • 常见的移动端开发分为移动版网站和响应式设计。 移动端开发可以让技术人员专注于移动端的页面优化,而无需在意桌面版的兼容,但页面一旦改动内容,维护成本就翻倍了; 响应式设计让开发人员只需维护一份项目,...
  • 移动端开发新趋势Flutter http://www.cocoachina.com/articles/28105移动端开发新趋势Flutter
  • 现在还在大量招聘移动端开发的,基本是大厂的明星应用或者是创新业务。大厂校招生那么多,画界面的工作基本上校招生都能胜任,那社招当然要求会更高些。安卓开发,甚至包括 iOS 开发,除了 iveg(if visi...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,168
精华内容 9,667
关键字:

移动端开发