移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
请注意,本文编写于 2082 天前,最后修改于 173 天前,其中某些信息可能已经过时。
HTML5学堂:相对来说,JS在移动端要远远低于PC端的使用频率,因此积累的开发经验并不是太多。在这里简要整理一些JavaScript在移动端的项目经验,主要包括click点击事件延迟、元素高亮点击区、zepto的touch问题等。 移动端click时间300ms延迟 在移动端,click点击事件会造成300ms的延迟,造成这种延迟的原因在于:当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,浏览器就等待 300 毫秒,以判断用户是否再次点击了屏幕。 对于这种体验
CSS中有很多媒体查询的用法,例如设备尺寸判别,是否支持鼠标行为,是否是黑暗模式,是否是省电模式等。
课程地址:https://www.imooc.com/learn/229 一、 常见移动端开发框架简介 二、Zepto框架介绍和入门 三、 Zepto框架核心API 1.Core 2.事件 自定
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 1. Why Zepto.js? API类似jQuery,熟悉jQuery可以无缝迁移到Zepto.js Zepto仅针对高版本现代浏览器设计了最小核心的通用库,代码体积小,尤其适合移动端开发。 Zepto增加了针对移动端的触摸和手势相关的事件 Zepto模块化做的很灵活,可以自定义组合模块 2. Zepto.js下载 代码下载:zeptojs中文站
问题:兼容性差距,由于@change触发方式不同,导致时间加载不够统一,时间触发出现问题。
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能:用户双击手机页面的时候,浏览器会智能的缩放当前页面到原始大小。 双击缩放的原理就是,当用户click一次之后,浏览器会经过约300ms之后检测是否再有一次click,如果有的话,
在近期的一个移动端项目中,有一个页面需要有弹框提示,并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动,在 iScroll 的配置当中把 tap 和 click 事件都开启了。 代码如下:
屏幕大小指屏幕的对角线的长度,单位一般是英寸。常见的手机屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。常见手机屏幕查看网址 http://screensiz.es/
早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。
围绕前端的性能多如牛毛,涉及到方方面面,以我我们将围绕 PC 浏览器和移动端浏览器的优化策略进行罗列 注意,是罗列不是展开,遇到不会不懂的点还请站外扩展 开车速度有点快,坐稳了。 tips : 这么多前端优化点你都记得住吗?反正我是收藏起来备查的。 PC 浏览器前端优化策略 PC 端优化的策略很多,如 YSlow(YSlow 是 Yahoo 发布的一款 Firefox 插件,现 Chrome 也可安装,可以对网站的页面性能进行分析,提出对该页面性能优化的建议)原则,或者 Chrome 自带的 Audits
如何打造一个移动端H5性能平台?听起来是否有点高大上,不知道如何下手。不要紧张,我们来手把手教大家打造自己的移动端H5性能测试平台。 功能篇 【H5前端性能平台可以做什么】 以前我们要测试移动端H5性能,通常会用到远程连接+抓包分析,工具诸如:fiddler,Charles。或者是一些在线测试工具:Page Speed、PCAP Web Performance Analyzer、WebPagetest。这些工具要么测试执行过程复杂,要么测试报告复杂,亦或者也看不出测试结果是好是坏。 所以我们希望移动端H5性
本文首发于前端面试总结@知乎专栏,各位可以通过点击文章下方的阅读原来来访问原文地址 问题一览 mouseover和mouseenter两个事件有什么区别? 移动端的click事件行为与PC端有什么不
功能需求:H5页面(vue)和移动端安卓、苹果进行交互,调取原生摄像头或相册上传照片;
话说又学到移动端了,真的让我有点头疼了...真的很麻烦啊!!但是没办法,硬着头皮学吧.
1 点击300ms 使用fastclick 2 移动端1px 在ios中使用0.5px 3 js中获取浏览器高度,获取scrollTOP等属性需要兼容 4 H5 的audio在ios上autoplay播放 一般使用进入页面后,使用js控制播放 5 在html上加overflow:hidden属性的时候,好多移动端浏览器都不支持 要实现超出范围隐藏,滚动条不显示,一般使用js获取高度来动态设置html高度 6 ios系统中在移动浏览器的页面中给按钮加JS事件,其按钮必须是原生HTML按钮或者
我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。
会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能。
前端与移动开发基础大纲所处阶段主要内容技术要点学习目标第一阶段: HTML5 + CSS3HTML51、 浏览器与浏览器内核2、语法及使用、3、 常用标签4. 语义化5、 表单元素6、 HTML 、7 新增标签可掌握的核心能力: 掌握 HTML5 常用标签; 掌握 CSS 语法及使用技巧; 掌握CSS3新增选择器; 掌握CSS3新增样式属性; 掌握 DIV+CSS 布局方式; 掌握常见网页布局技巧; 掌握企业级、电商级网页开发基本的流程、规范; 掌握语义化、模块化、兼容性的PC端网页开发; 掌握 Pho
之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标,
移动端浏览器兼容性较好,我们不需要考虑以前js的兼容性问题,可以放心的使用原生js书写效果,但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件),Android和IOS都有。
一般情况下 CSS 并不会影响 JS 事件,但有一个 CSS 属性则比较特殊,那就是 pointer-events,它可以用来规避鼠标事件,其中大部分属性值只适用于 SVG(可缩放矢量图形)操作,而我们只需要关注其 none 属性值,该值表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
最近官网改版的任务交给了我,开发使用的是jq操作dom,后台php渲染的方式,如今已经开发完成,现在把一些问题记录下来,已备忘。
本文主要是记录自己在移动端开发中遇到的一些坑点或者总结(持续更新,有新的坑点会总结进来)
介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~
一、技术选型 语言选择: JavaScript TypeScript 最终选择了JavaScript作为开发语言,一开始尝试使用TypeScript,但是由于是移动端,antd-mobile的库与TS有那么一些不兼容,官方文档上也没有像PC端那样推荐你使用TS,踩过坑,于是换回了JS。 开发环境 create-react-app 目前最好用的开发React环境 UI组件库的选择: Swiper.js 个人认为Swiper在对Vue的支持会更好,官方文档上也没有明确支持React ant
Github(55.1k): https://github.com/lodash/lodash
HTML5学堂:今天要与大家分享一个当前移动端很常见的效果,类似于手机联系人的快速导航功能,即当触摸a~z的字母时,能够相对应的显示文字。有些手机的音乐导航也类似,具体可详见下图: touchmove
当同时绑定 touchstart、touchend、click 三个事件的时候,触发的先后顺序是:touchstart -> touchend -> click。正是由于这种 click 事件的滞后性设计从而会产生事件穿透(点击穿透)问题。
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件
第一部分 MVVM如何实现模板绑定,依赖是如何收集的? vue2中的diff算法是怎样实现的? 请详细说出vue生命周期的执行过程? vue组件间的交互有七种你知道几种? vue-cli3.0如何实现的? 说说hash路由和history路由,你能自己编写一个前端路由吗? 你能手写vuex状态管理吗? 你能开发自己的组件库吗(树组件,日期组件,表格组件)? 第二部分 vue里面的虚拟dom是怎么回事 vue双向绑定讲一讲 讲vue-lazyloader的原理,手写伪代码 讲express框架的设计思想 讲事
日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于fiddler、Charles、chrome devtools、Firebug、还有Safari远程调试等比较熟悉,甚至有些是我可能也没有用过的;
web前端 —— 移动端知识的一些总结 个人在移动端的一些总结归纳,有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应
EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定、播放流畅,可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等,具备较高的可用性。EasyPlayer具备多个版本,可满足用户的多场景需求,如EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等,并且还拥有Windows、Android、iOS版本,EasyPlayer.js还可支持Linux平台。
本文精选了「前端大全」2017 年 12 月的 15 篇热门文章。其中有职场分享、技术分享和技术资源。 《6 大主流 Web 框架优缺点对比》 是该读些评论和做一些总结的时候了。当我们开始写这个系列博客的时候,我们知道 JavaScript/web 应用框架并不太好总结。我们努力对这个不可回答的问题作出回答:我该用什么样的框架? 《可能是目前最完整的前端框架 Vue.js 全面介绍》 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和re
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里。还有很多不足的地方,希望多多指出,以便改进。 1、代码部分 分为四个文件: slideshow.html slideshow.css base.js slideshow.js 1.1、slideshow.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端开发第一个需要面对的问题。
HTML 标签和属性 HTML标签大全 手机页面的一些有用的meta 前端 Meta 用法大汇总 标签语意化 选择合适的块级HTML标签流程图 Web标准(Standard) HTML Living Standard-WHATWG WHATWG维护的持续更新的HTML标准 W3C规范 W3C规范翻译 HTML5中文小组翻译的。附HTML5中文小组主页 CSS 基本概念 CSS 词汇表 注释,语句,规则集等等。 【转载】理解 CSS 属性值语法 看懂 CSS 规范的属性值定义。 选择器
HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,一方面提升了用户体验,另一方面HTML5技术跨平台,适配多终端,改变了传统开发者需针对不同操作系统进行研发的局面。
不知不觉在网易已有三年半,占了一半时间都在与移动端打交道,整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固标准和未知特性多得难以快速掌握。
领取专属 10元无门槛券
手把手带您无忧上云