移动端记得起个好头

9年前
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; 第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览; 第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式; 第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话...
Mobile-Web 810 0 6html

喷一喷 box-flex

9年2个月前
今天让这个属性坑的满地打滚,w3c 这样描述道: 但事实真的是这样的吗?看下图: 我们发现,除了左右比例根本不是说好的 1:2 之外,这个比例还会随着容器内容的多少而变化,我书读的比较少,顿时茫然了。 后来发现,再给他们各自设置 width: 0, 才会真正的按 1:2 分配宽度。既然这个属性有问题,我们为什么不用更好的 display: flex 呢? 这才是真正的坑...
Mobile-Web 1139 1 0box-flex不按比例分配

微信页面开发中遇到的坑

9年4个月前
最近做了几个微信的活动页,总结一下遇到的问题。 1.首先遇到的是,各种小米的机型,window.innerHeight 获取到的不是 css pixel, 居然是 device pixel... css pixel(css 像素), 指的是 css 样式代码中使用的逻辑像素,比如定义 body 的宽度为 320px. device pixel(设备像素), 指的是设备的像素,比如 iPh...
Mobile-Web 1202 1 1微信开发微信API微信BUG

transform:translate3d开启硬件加速?请慎用!

9年6个月前
网上关于使用 transform: translate3d 来开启硬件加速,使 GPU 提升性能的帖子已经泛滥了,但是我在实际项目中却被这个所谓的硬件加速坑出了翔。 实际场景如下:项目中的交互效果非常复杂,节点也异常的复杂,并且给大多数节点(不管有没有动画)加上了 transform: translate3d 后来却发现,所有动画都变的卡顿不堪。去掉该属性之后,动画反而更顺畅,说好的开启硬件加...
Mobile-Web 1236 0 0transform性能损耗

iscroll.js使用注意事项

10年2个月前
概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的中间区域。 然...
Mobile-Web 1199 1 0移动开发iscroll

zepto.js使用注意事项

10年2个月前
前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库。 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端的浏览器是无用或者低效的。而 Zepto 只针对移动端浏览器编写,因此体积更小、效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习成本也很低。虽然不兼容ie但是提供了...
Mobile-Web 1242 0 2移动开发zepto

手机页面html元素点击时出现黄色框框的解决办法

10年3个月前
相应的元素加入这个样式 .someclass{ outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0); } ...
Mobile-Web 1142 0 3
加载更多
京公网安备 11011202003202号 鲁ICP备 13027548号-1