首页
学习
活动
专区
工具
TVP
发布

移动项目经验 JavaScript

HTML5学堂:相对来说,JS在移动要远远低于PC的使用频率,因此积累的开发经验并不是太多。...在这里简要整理一些JavaScript在移动项目经验,主要包括click点击事件延迟、元素高亮点击区、zepto的touch问题等。...移动click时间300ms延迟 在移动,click点击事件会造成300ms的延迟,造成这种延迟的原因在于:当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。...元素点击高亮样式的处理 在移动,出于让用户了解是否点击成功,浏览器会在用户点击一个a标签或者Javascript定义的可点击元素时,出现一个半透明的灰色背景。...解决办法有两种,与其说解决办法倒不如说是权宜之计,一种是干脆不兼容低端手机(当前也是现实的,只要这种手机在市场份额当中占比很少,其实是可以忽略的,就如同当前PC的兼容,基本都是做到IE8或IE9以上,

1.4K80
您找到你想要的搜索结果了吗?
是的
没有找到

vue项目移动、pc适配方案

vue项目移动、pc适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible...二、引入lib-flexible 在项目入口文件main.js 中引入lib-flexible import 'lib-flexible' 注意事项(important): 由于flexible会动态给页面...可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js) 具体配置内容如下: module.exports = { css: { loaderOptions: {...pc的适配方案,当然手机、pc也可以同时适配,前提是页面布局不变。...一般而言,手机、pc共用一个项目还是建议使用栅格布局、媒体查询控制。 六、参考 vue中使用rem布局解析+大屏自适应 基于vue cli3的移动适配问题

2.9K30

【系列】移动项目经验 表单兼容(上篇)

移动 表单兼容(上篇) HTML5学堂:从这篇文章开始,我们将为大家总结介绍移动的常见兼容问题,今天要提的是关于表单的一些兼容问题,本文主要包括input文本框的bug;默认的按钮样式;IE10的文本框问题...前面想说的一些话:自己有一个学生在接触移动,也辛辛苦苦的总结出了一些移动的兼容问题,发布了一篇手记似的博文,然后,没过多久就发现被各种网站复制走,各个网站也不加任何出处,也不进行文中错别字的修改,更不必说调整语言了...移动兼容 - fixed定位的input 移动系统:iOS 微信当中 功能描述:在我们的移动网页当中,经常会在顶部出现搜索栏。...移动兼容 - iPhone、iPad的按钮默认样式 移动系统:iOS设备中的网页 功能描述:在进行表单中的按钮元素样式设置时,有时会处理按钮的背景以及圆角等特性,但是在iPhone以及iPad当中(...移动处理 - 默认高光样式的处理 功能描述:这个应该并不能算是移动的兼容问题了,因为很多浏览器(webkit内核)均存在这个问题,对于a标签、聚焦时的input元素都存在这种高光效果。

92580

【系列】移动项目经验 表单兼容(下篇)

【系列】移动项目经验 表单兼容(下篇) HTML5学堂:本文,我们将继续为大家总结介绍移动的常见兼容问题,今天要提的是关于表单的一些兼容问题,主要包括调用相册的按钮样式处理;占位符placeholder...对于移动的兼容问题,由于内容较多,决定书写成一个系列。在这些杂乱知识的发现与整理,主要来源于几个讲师平时的积累,而自己的学生们也为内容的充实做出了很大的贡献,在此非常感谢~!...在我们的移动网页当中,会有上传照片的操作需求。此时会使用到文件类型的input文本框,但是不同的系统不同的浏览器在样式上均不相同,而且,设置背景图也没有效果。...移动兼容 - 关闭iOS中键盘自动大写 移动系统:iOS系统 具体情形:在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能。...关于表单的兼容问题,这里就算告一段落了,下一篇文章继续为大家介绍移动其他方面的兼容问题~~~感谢各位的支持~!

886120

移动项目快速升级 react 16 指南

本文作者:IMWeb EnjoyChan 原文出处:IMWeb社区 未经同意,禁止转载 背景 考虑到移动性能,腾讯企鹅辅导移动项目使用了更为轻量的 preact(7KB) 及其对应配套 preact-router...错误处理, 可通过定义一个组件专门捕获错误,当页面部分组件报错时兼容,更友好的用户体验 lazy 提供动态 import 组件,Suspense 实现代码分割 hook 的出现 更好的服务渲染 ......webpack config 文件更新 alias 及更新 preact 在项目中引用 ?...开启严格模式,运行项目,在浏览器 console 面板中可查看到项目可能的报错及 warning, 并附带有 react 相关链接关于如何修改 fix 问题点 state 相关 react 16 不允许...事件中会收集所有的 setState 并进行 patch update, 但遇到了有些组件的方法表现并不一致,而是每执行到 setState 则立即更新,这个需要注意社区组件提供回调方法的执行机制,如我们项目中使用到

1.4K20

java移动开发_移动开发

1.移动端视口问题 视口是指浏览器的可视区域,移动的视口到底是多宽呢? 现在市面上的大部分手机,比如iphone X,它的默认视口宽度为980px,而一个iphone X的屏幕宽度仅仅为375px。...我们可以使用谷歌浏览器的移动调试工具,来访问百度的搜索结果,可以看到网页明显被缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。...(当然,想要内部滑动可以自己设置啊),正常情况下,我们都会应用到上面的那一串代码(在这里说个题外话,我这两天做项目就有一次忘记添加这段代码,结果找半天找不出来原因,后来一问我的授课老师才发现原因(笑哭)...3.移动尺寸 是同一个网页在不同尺寸手机中的效果。...注意:在移动,如果使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。 题外话:移动看上去是不是很麻烦?视口那么小,还要引入各种东西,里面要添加的又杂又乱,还要计算数值,是不是很麻烦?

4.7K20

移动网页布局】移动网页布局基础概念 ① ( 移动浏览器 | 移动屏幕分辨率 | 移动网页调试方法 )

一、移动浏览器 ---- 移动浏览器 比 PC 浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom.../ 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动开发适配比较简单 , 兼容主流的浏览器 , 即兼容...Webkit 内核浏览器即可 ; 二、移动屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android...Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动网页调试方法

2.5K40

10-移动开发教程-移动事件

在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1....PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能...移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。...封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。...---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

6.6K80

10-移动开发教程-移动事件

在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1....PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能...移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。...封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。...---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

6.2K70
领券