web APP 开发之踩坑手记
屏蔽输入框怪异的内阴影
-webkit-appearance:none
禁止自动识别电话和邮箱
`
`
## 禁止用户选择文本
`-webkit-user-select:none`
## 宽度设置为100%,加了padding或border后出现滚动条
`box-sizing:border-box`
## touchcancel 事件
touchcancel事件 是当某种touch事件非正常结束时触发,属于系统事件。
## 300ms 单击延时
click事件因为要等待双击确认,会有300ms延时,在移动端体验不好。开发者大多会使用封装的tap事件来代替click事件,所谓的tap事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。
## 移动端点透事件
base64编码图片替换url图片
对于一些小图片icon之类的,可以将图片用base64编码,来减少网络请求。
手机拍照和上传图片
`
`
transfrom: translate3d 开启动画GPU硬件加速。
ios体验良好,但在一些低端Android机型可能有意想不到效果。
设置placeholder ,但当focus的时候文本没有隐藏。
input:focus::-webkit-input-placeholder{ opacity: 0; }
background-image和image的加载区别
在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签img是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载标签img的内容,再加载背景图片background-image,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。
移动端1像素问题
//方案1(手淘解决方案):通过js
window.onload = function () {
var dpr = window.devidePixelRatio;
var scale = 1/dpr;
var width = document.documentElement.clientWidth;
//根据设备像素比,改变缩放比initial-scale
var metaNode = document.querySelector('meta[name="viewport"]');
metaNode.setAttribute('content','width=device-width,initial-scale='+scale+',user-scalable=no');
//页面中元素宽度高度等,比例反向乘回来
var htmlNode = document.querySelector('html');
htmlNode.style.fontSize = width * dpr + 'px';
}
// 方案2 通过css媒体查询和伪类
# box{
width: 200px;
height: 200px;
position: relative;
}
#box:before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #000;
}
@ media screen and (-webkit-min-device-pixel-ratio:2){
#box:before{
transform:scaleY(0.5);
}
}
@ media screen and (-webkit-min-device-pixel-ratio:3){
#box:before{
transform:scaleY(0.3333333);
}
}
web APP 开发之踩坑手记的更多相关文章
- 移动web app开发必备 - 异步队列 Deferred
背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...
- 移动web app开发必备 - Deferred 源码分析
姊妹篇 移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...
- App.js – 用于移动 Web App 开发的 JS 界面库
App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...
- 微信公众平台开发:Web App开发入门
WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...
- web app 开发必不可少的滑动插件 Flipsnap
flipsnap.js一个轻量级的滑动效果JS开发库,仅有8k大小(压缩版),包含了10种滑动方式,是web app开发必备的js库,除了兼容主流的智能手机浏览器(iossafari,android, ...
- 移动端web app开发学习笔记
移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...
- Native App开发 与Web App开发(原生与web开发优缺点)
Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...
- 前端读者 | Web App开发入门
本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...
- WEB APP 开发标签
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览: 第二个meta标签是iphone设备中的safari私有meta标签,它 ...
随机推荐
- MySQL中的关系
关系 将实体与实体的关系,反应到最终数据库表的设计中来.将关系分为三种:一对一,一对多(多对一)和多对多.所有的关系都是指的是表与表之间的关系. 一对一 一张表中的一条记录一定只能与另外一张表的一条记 ...
- 使用IntelliJ IDEA配置Maven(详细操作)
一,下载Maven 进入官网http://maven.apache.org/ 点击Download 找到如下图所示的区域,注意你的操作系统. 点击安装你所需要的安装包,下载,解压. 二,Maven环 ...
- 桩服务开发2---与python结合
from mitmproxy import httpdef request(flow): request_data=flow.request print(request_data) 进入py目录,在终 ...
- 事件循环--eventloop
一.什么是事件循环? 事件循环是 JS 实现异步的具体解决方案,同步代码直接执行,异步函数或代码块先放在异步队列中,待同步函数执行完毕,轮询执行异步队列的函数. 事件循环 二.node.js中的事件循 ...
- LeetCode Array Medium 11. Container With Most Water
Description Given n non-negative integers a1, a2, ..., an , where each represents a point at coordin ...
- Java Socket NIO示例总结
Java NIO是非阻塞IO的实现,基于事件驱动,非常适用于服务器需要维持大量连接,但是数据交换量不大的情况,例如一些即时通信的服务等等,它主要有三个部分组成: Channels Buffers Se ...
- Linux环境安装Nginx步骤
centos7平台编译环境使用如下指令安装: 1. 安装make: yum -y install gcc automake autoconf libtool make 2. 安装g++: yum -y ...
- aarch64 架构 交叉编译 tcpdump
1. 下载 tcpdump 源码 地址 :http://www.tcpdump.org/ (4.9.2) tcpdump 依赖 libpcap 源码 地址 : http://www.tcpdu ...
- PHP-两数相除
给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符. 返回被除数 dividend 除以除数 divisor 得到的商. 示例 1: 输 ...
- java中接口有什么用
1.通过接口可以实现不相关类的相同行为,而不需要了解对象所对应的类. 2.通过接口可以指明多个类需要实现的方法. 3.通过接口可以了解对象的交互界面,而不需了解对象所对应的类. 另:Java是单继承, ...