展开

关键词

移动项目经验 JavaScript

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

61480

移动video的项目

18630
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

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

    vue项目移动(手机)调试

    65720

    Angular4记账webApp练手项目之三(在angular4项目中使用路由router)

    前台源码 前言 1、本项目是基于之前文章续写的。

    16130

    移动项目快速升级 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 则立即更新,这个需要注意社区组件提供回调方法的执行机制,如我们项目中使用到

    36320

    基于cube-ui搭建移动项目

    cube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式(默认使用后编译),使用前都需要修改应用的依赖和配置。

    1.3K20

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

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

    43080

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

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

    529120

    react 移动项目配置 postcss-pxtorem

    前提 *create-react-app 创建的项目 通过 eject 命令暴露出react 全部配置 安装配置 postcss-pxtorem npm i postcss-pxtorem -D 添加 create-react-app 默认scss css自行配置less 要应用getStyleLoaders, rem转换工具就生效了 效果 如图2 图 1 图 2 前提 *create-react-app 创建的项目

    3.9K109

    Angular4记账webApp练手项目之四(在Angular4项目中用echarts绘制图表)

    29030

    java移动开发_移动开发

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

    5320

    –Vue项目使用vw实现移动适配教程

    [New]Vue项目使用vw实现移动适配教程 ? 2018年1月25日 11:58:01 最新的大漠老师移动适配方案, 使用这套方案可以取代flexible.js 首先建议读者先去学习大漠老师的这篇文章,看完能有大大的收获 如何在Vue项目中使用vw 实现移动适配 ####正文开始 使用vue-cli新建项目 安装依赖 复制以下代码: 复制进行 postcssrc.js 配置 .postcssrc.js配置 ###各插件的功能: ---- postcss-px-to-viewport : 将项目中的px转化为vw 容器适配,可以使用vw 文本的适配,可以使用vw 大于1px的边框、圆角、阴影都可以使用vw 内距和外距,可以使用vw postcss-px-to-viewport文档 important; } ``` #####这样就可以用vw进行移动项目开发啦! ----

    55730

    Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)

    写在前面 在angular4项目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/ 安装及引用 安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们的font-awesome图标苦,在我们项目index.html中引用 <!

    31520

    Vant+px2rem搭建移动项目

    注意! 这里有个坑,px2rem会把第三方库也跟着转成了rem 卸载之前的postcss-px2rem

    10510

    vite2.0+vue3移动项目实战

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs import 'vant/lib/index.css'; // 全局引入样式 createApp(App) .use(router) .use(store) .use(ant) .mount('#app') 移动适配 // 选项写法 '/api': 'http://123.56.85.24:5000'//代理网址 }, cors:true } }) 以上,一个最基本的移动开发配置完成

    46920

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

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

    1.2K70

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

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

    1.2K80

    移动基础

    移动基础 移动浏览器我们主要针对webkit内核进行兼容 现在移动碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC页面1px就等于1个物理像素,但移动不同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 3.2 4.1单独移动页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动。 通过设备判断,如果是移动打开,则自动跳转到移动页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动技术解决方案 1.移动浏览器 移动浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。

    11510

    移动适配

    实习期间主要在写微信H5,遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端,只能自己摸索着来。 对于工作量小的项目,这个方法还是简单有效的,当然没办法覆盖所有设备,只是一个没办法的办法,这样做其实很痛苦,工作量也大。 当时工作赶得比较紧(其实是自己懒没仔细看),以为要用到grunt还需要打包发布,是用在手淘这种大项目,不适合自己捣鼓的小页面,所以就略过了...... 以后的项目应该都会使用这个方案。

    34020

    相关产品

    • 移动金融开发平台

      移动金融开发平台

      腾讯移动金融开发平台(TMF)为银行、互联网金融、保险、证券客户提供一站式、覆盖全生命周期的移动金融服务。核心服务包括APP客户端开发组件、应用加固、环境安全检测等APP开发运营关键服务,帮助金融机构低成本、高效率地打造移动金融服务…...

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券