移动端

  • 移动端H5页面调试调试

    移动端H5页面调试调试

    移动端调试需求场景在不借助调试工具的情况下,我们在开发移动端的h5项目时会遇到下面几个问题一般情况下,我们都是在pc上的浏览器开发并调试移动端的h5项目,在这个过程中可能会遇到如下情景: h5中的有些模块需要调用APP本地的api,如拍照,定位等 部分移动设备对css的渲染存在差别,需要在真机上看效果 无法像pc浏览器的开发者工具那样,查看 修改DOM结构等操作(vConsole能实现部分功能) 对于一些触摸滑动等手势操作也存在兼容性问题 带有用户系统的多角色模块,在pc浏览器上调试的时候需要进行多次...

    移动端 2018-08-23 184 0
  • 移动端布局fixed问题解决方案

    移动端布局fixed问题解决方案

    今天测试忽然提了一个bug,关于position:fixed的问题,一般情况下使用并没问题,当页面出现表单时,由于弹出键盘,整个页面会出现布局错位问题,或者含有fixed的模块会空白(ios11比较明显),经过几个小时的各种尝试,最后不得不放弃fixed的布局,重新采用flex布局,另外补充一句在移动端布局的时候能不用浮动尽量别用。项目用的是sass,为了考虑兼容性,特意整理了一份flex的功能函数模块/*  * ========================================...

  • 移动WEB前端开发资源整合

    移动WEB前端开发资源整合

    meta篇1.视窗宽度<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>其中 width=device-width 是设置视窗宽度为设备视窗宽度,还可以固定宽度,例如:width=640 则是640px的宽度(常见于微信);initial-scale=...

  • 移动端布局方式----热门贴

    移动端布局方式----热门贴

    今天给大家讲一下移动端的布局,移动端布局考虑的因素不同于PC端浏览器兼容,而是更为严谨的手机分辨率适配问题,关于这个就不叫蛋疼了,下面说一下在移动端布局前,需要掌握的一些必备知识。必备知识PC盒子模型:    盒子宽度 = width+padding+border移动端布局新增了一个css3属性box-sizing,解决了这个问题    box-sizing:border-box;   padding,border向...

  • 移动端拖拽全兼容框架

    移动端拖拽全兼容框架

    今天花了点时间,写了一份在移动设备上使用的拖拽功能,次拖拽和PC端的拖拽有几个不同的地方需要提一下:    1.所有事件都需要绑定    2.使用移动端的事件来组成拖拽的步骤,touchstart, touchmove,touchend    3.关于元素坐标获取不适用之前的clientX(clientY),采用新的targetTouches[0].pageX(targetTouches[0].p...

    移动端 2015-08-05 1086 0 拖拽event移动端
  • 移动端开发-设备像素比devicePixelRatio简单介绍

    移动端开发-设备像素比devicePixelRatio简单介绍

      本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台。  本文内容大部分属于翻译性质内容,因此,会不那么通俗易懂。不过,你是做手机开发的,或是有意向的,本文的内容如果细细读来,还是有些收获的。  一、定义  定义如下:  window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips...

  • 移动webApp便利贴:苹果专用

    移动webApp便利贴:苹果专用

    需要->添加到主屏幕1. 作为app运行<meta name=”apple-mobile-web-app-capable” content=”yes” />2. 标题栏的样式<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />当然其值还可以是:defaultblackblack-translucent3. 标题<meta name=”apple-mobile-web-app-title” c...

1