对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320。
持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0（IOS 10.3.3） Github: webapp-bugs 1....IOS光标不跟随输入框移动 3.1 艰辛历程 我为什么会关注这个问题：那是因为我**（这里省略一万个草泥马）也遇到了这个问题呀，容我细细说来。...顿时突然想到移动端点透事件貌似有个300ms延迟执行。虽然点透事件在移动端会被处理掉，然而我只是想验证一下我的猜想。...（不过以我的测试情况来看，在chrome和safari上滑动的时候输入框不再被激活，类似在PC端滑动的时候采用了蒙版或者points-event: none;的效果） var thisFocus; var...如果是在混合APP的开发中，应该是有相关插件来监听键盘事件的，同时可以获取键盘的高度 如果旧版本的浏览器不支持getBoundingClientRect方法，可以用代码中提供的getOffsetTop方法来替代
最近由于项目需要，使用html5+css3+jQ开发了一个淘宝试客webapp，淘客模板、移动端试用app 001-360截图20170806104016438.jpg 002-360截图20170806105322118
公司内部有一款企业社交产品share，近期打算开发手机版，初期规划是通过webapp的方式嵌入到另一款即时通信native app。...虽然曾经读过几篇关于webapp的经验总结的文章，也了解过HTML5、CSS3的新特性，但是实战起来还需要摸索。下面总结了这次开发的几点经验，分享给大家，若有不当之处欢迎斧正。...四、HTML5 、CSS3 1、position:fixed 设计稿是根据native app的布局设计的，需要固定顶部标题栏、底部导航栏，在web端常用到position:fixed 来实现，可惜移动端在...因为兼容性问题，CSS3提供的弹性盒子布局 display:box 在web端的使用受限，但到了移动端弹性盒子布局确是一大利器，让人爱不释手。...2、JS交互效果 在web端我们常常会引入jquery文件，但是在移动端我们不得不考虑网络带宽、流量的限制，尽量减少代码量。所以，JS库的使用则是能少则少了。
1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。...我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。...这样一来，就要求我们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。 注：border边框大小除外 (既然有问题，怎么会没有解决办法呢？...注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？
我始终坚信WebApp会有未来，所以研究了一下符合国情的移动前端UI库，发现腾讯和淘宝在这块都做得不错，百度那个WebUploader – 文件上传组件做的不错，还有百度的UEditor – 富文本编辑器...，但是移动前端UI库暂时没发现。...Frozen UI 自述：简单易用，轻量快捷，为移动端服务的前端框架。...当然了，如果开发WebApp，我会优先选择这个。 WeUI 自述：WeUI是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。.../ 兼容：兼容到 iOS 6+ 以及 Android 4.0+ 基于 Framework7 进行开发，并参考 Ratchet、Fastclick 开源库。
cnpm) 包管理工具 yarn add axios -S cnpm install axios -S -S: --save-dev 生产环境的依赖 （dependencies） -D: --dev 开发环境的依赖...在命令窗口中使用vue ui，弹出页面 使用模块 多环境变量配置（开发、测试、生产） axios 请求拦截，响应拦截 (API统一管理) sass 预编译 rem移动端适配方案 vant-ui 按需导入...我们写入请求拦截和响应拦截，进行API的统一管理，请求分两种形式：分别为get , post 形式进行传参 3.sass预解析：意思就是说将浏览器不能识别的css代码转换成浏览器能识别的 4.rem：针对于移动端的适配问题...初始化样式问题 —我们可以在(reset.css中引入项目) 例如 box-sizing:border-box 三、路由 我们经常用的有 路由嵌套 路由传参 路由守卫 keep-alive 四、组件化开发...1.组件拆分问题：我们可以封装公共组件、功能性组件 2.组件开发：父传子、子传父、兄弟传值 五、webpack配置的打包优化（vue.config.js） 发布者：全栈程序员栈长，转载请注明出处：https
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能...移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。...---- 参考文章： 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
Moobile 是一个基于 MooTools 框架实现的移动 WebApp 开发框架，目前它主要在 iOS 设备的浏览器上实现原生应用的体验。...通过 Moobile 创建的 WebApp 能够在 iPhone 和 iPad 上工作，这里有 Demo，有 iOS 设备的同学可以直接测试下效果。
对于pc端的前端开发以及html5和css3学习过后对页面布局更加熟练了,对于现在开发更多倾向于移动端开发,对于移动端开发和传统PC开发又有所不同,下面简单认识下移动端开发概况!...对于学习移动端开发首先要了解下面三个概念(设备独立像素,物理像素,和像素比),下面简单介绍下这三个概念!...上面说过的设备独立像素如何改变,下面就看看使用移动端开发的meta的viewport标签 <meta name="viewport" content="width=device-width,initial-scale...minimum-scale=1,maximum-scale=1//最大最小缩放比例,一般不用设置 <em>移动</em><em>端</em><em>开发</em>的meta标签一般只需要一下的属性就行 我们不喜欢用户进行缩放,直接我们在<em>开发</em>过程中,转换成对应的物理像素能较好的观察哦设备的显示效果
1.前言 到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。...如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。...尤其是在移动端，请求显得特别珍贵，在网速的不好的情况下，请求就是珍贵中的珍贵。...，后来自己找不到方法，直接在sf上提问了，大家可以去参考下：移动端轮播图，上下滑动的时候不触发页面的滚动 ps：滑动我没有使用什么库，是我根据touchstart和touchend的移动距离来判断是左右滑动或者上下滑动...2.web移动端页面性能优化方案 3.Web前端优化最佳实践及工具集锦 4.移动前端系列——移动页面性能优化 5.Web性能优化：图片优化 16.小结 我在移动web(手机网站)上，遇到的问题，暂时就是上面这些了
移动端开发规范 引言：最近得空，整理一些平时工作中要求的开发规范，浅薄之处还请大家多指教。...目录 移动端开发规范 代码规范 基本原则 代码清晰 一致性 通用规范 类命名 方法命名 变量命名 常量命名 枚举类型命名 图片命名 通用规范 通用设计规范 开屏页版本号 版本检查 开屏页广告 推送 通用测试用例及处理规范...处理方式 逻辑覆盖 请求网络接口 所有请求网络场景 正常返回数据 用户断网 提示用户检查网络 移动网络 接口异常 提示用户重试 wifi网络 无网络权限 提示用户无权限，引导用户设置 关闭网络授权...develop：主开发分支，一般从master分支中切出，功能开发及最终测试完成后，合并回master，极少直接修改。...分支使用 开发人员应该在自己的开发分支（例如：justin_dev）或者功能分支（login）上进行开发，完成开发之后，汇集到develop分支上，一般develop不直接进行修改。
移动端开发模式 现今流行的移动端开发模式共有三种： web（H5） Hybrid(混合开发) Native(原生） 下面来剖析一下三种模式的优缺点： 1.开发难度： 无疑web和Hybrid...难度要小于原生app开发，而且可以利用现有的Web开发工具和工作流程。...2.移动设备本地API访问： Hybrid可以通过jsAPI访问移动设备的摄像头，GPS等。 原生App 可以通过原生编程语言访问设备的所有功能。...Hybrid App (HTML5 in mobile devices) 使用原生写一个容器，使用HTML+CSS+JS实现用户界面和交互，（克服了webApp短处), 同时比原生App灵活性更高。...对于性能要求高的游戏类App还是应该使用原生开发模式。
一、HBuilder调试webapp步骤 官网：http://www.dcloud.io/ ?...完善manifest.json配置信息（主要是图标、启动图片和权限相关，我也不是很熟悉，多看下开发文档） 3. 发行打包 ?...三、MUI 开发文档：https://dev.dcloud.net.cn/mui/event/ ? https://dcloud.io/doc.html ?
Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。 一、Safari浏览器私有 Meta 属性 <!...Meta属性就介绍到这里，这是移动互联网的时代，随着HTML5时代的到来，各大浏览器对HTML5的支持也有了很大的飞越，对于我们来说移动就是未来，就是未来我们大显神威的好地方。...各位拉好你的秋裤，让我们一起来拥抱现在的以及未来的移动世界吧！ 四、360浏览器私有 Meta 属性 <!
自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。...Web App： 1、开发成本较低 使用web开发技术就可以轻松的完成web app的开发 2、升级较简单 升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉 3、维护比较轻松 和一般的...web一样，维护比较简单，它其实就是一个站点 Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术...在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发 Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解...10、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！
移动端开发技巧 01 一、样式按组件或板块分文件写再合成 ①设置各种变量 采用scss或者less来写css代码有很多好处。这里就不详细说。...例子如图： 02 二、页面适应性布局 个人认为，适配移动端比较好的布局方式是百分比+rem布局。 百分比的优势在于，同一个百分比的真实尺寸会跟随屏幕大小变化。...但是如果你用真机，也就是用移动设备看的时候，你会发现其实滚动条是不会出现的。所以有时候做移动的东西，还是需要真机测试一下比较靠谱啊。
移动端适配 相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。...idealviewport为浏览器定义的可完美适配移动端的viewport，固定不变，可以认为是设备视口宽度device-width。...user-scale=no禁止缩放 所以现在我们知道，这段在移动端常见的代码的意思，即将visualviewport和layoutviewport设置为idealviewport的值；这样我们在移动端就不会出现滚动条...键盘弹出与使用transform属性的情况在移动端是很常见的，所以需要谨慎使用position:fixed。 推荐使用flex flex，即弹性布局，移动端兼容性较好，能够满足大部分布局需求。...，在项目开发中重复造轮子是一件很不明智的事情；开发项目时我们可以借助第三方组件、插件提高我们的开发效率。
什么是插件 移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？ JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。...其他移动端常见插件 lsuperslide： http://www.superslide2.com/ l iscroll： https://github.com/cubiq/iscroll 5....移动端视频插件 zy.media.js H5 给我们提供了 video 标签，但是浏览器的支持情况不同。 不同的视频格式文件，我们可以通过source解决。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
