layout tltle tags
post
ios7下移动web开发的几个坑
webapp

1.Retina屏下1px border

由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,一般有以下几种方法:

  • 图片
  • 阴影
  • 缩放

移动版开发采用软图片的方法:

.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}

同样的方式也可以搞定分割线:

.border {
background-image:linear-gradient(180deg, #ccc, #ccc 50%, #fff 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom;
}

2.safari 工具栏隐藏

当用户在垂直模式(portrait )滚动页面时,底部工具栏将消失,URL栏变成一个小的半透明的条出现在顶部。

水平模式(landscape),用户滚动页面底部工具栏和主域名栏同时消失,变成完整的全屏模式。

当用户轻敲底部的时候,底部工具栏会出现,导致用户无法点中底部链接,如:加入购物车按钮

解决方案:让工具栏始终隐藏,当用户轻敲URL栏时出现:

<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui'/>

参数minimal-ui主要功能是让iOS7.1设备中的Safari移动地址栏和下面的工具条不显示

3.safari bfcache

BFCache(Back-Forward Cache)可以翻译成往返缓存。这是用来加速前进后退操作 时页面展示时使用的一种技术。

由于移动端网速特性,跳转页面改用js跳转,触发click事件先弹出loading层,然后location.href="xxx",当用户返回的时候,没有重新加载页面,loading层不会消失。

解决方案:利用pageshow/pagehide事件来检测BFcache的使用情况

$(window).on('pageshow',function(event){
if (event.persisted) {
toolfix();
$.jPops.hideAlerts();
$('#J_search').html('').addClass('a-search-btn');
$('#gallery-page').show();
$('#gallery-search').hide();
initBack();
}
});

http://isux.tencent.com/responsive-web-design.html

Retina屏下1px border的更多相关文章

  1. Retina屏实现1px边框

    问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...

  2. 移动端Retina屏boder 1px显示为2px或3px的解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 何为“设备像素比deviceP ...

  3. [转]retina屏下支持0.5px边框的情况

    2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...

  4. 移动端视网膜(Retina)屏幕下1px边框线 解决方案

    原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...

  5. mobile web retina 下 1px 边框解决方案

    本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. ...

  6. 再谈mobile web retina 下 1px 边框解决方案

    本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. ...

  7. Retina 屏移动设备 1px解决方案

    做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2  的屏幕上会显示成 2px,在 window.devicePix ...

  8. 移动端 Retina屏 各大主流网站1px的解决方案

    Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="in ...

  9. Retina屏的移动设备如何实现真正1px的线

    前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决?原来一直没在意,源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距不小…… ...

随机推荐

  1. ↗☻【HTML5秘籍 #BOOK#】第2章 构造网页的新方式

    div division 分区article 表示一个完整的.自成一体的内容块,比如博文文章或新闻报道hgroup 标注副标题 从结构上讲,它只关注顶级标题(也就是这里的h1).其他标题也会显示在浏览 ...

  2. Js获取Cookie值的方法

    function getCookie(name) { var prefix = name + "=" var start = document.cookie.indexOf(pre ...

  3. (转载)static全局变量与普通的全局变量有什么区别?

    (转载)http://www.cnblogs.com/StudyRush/archive/2010/09/25/1834922.html 全局变量(外部变量)的说明之前再冠以static 就构成了静态 ...

  4. Timus 1746 Hyperrook

    题意:在一个n维坐标系中,坐标的范围是0到m - 1,如果两个点坐标只有一个维度的坐标不同则可以相互移动,给出p个点,问任意两个点之间路径为d的个数是多少,答案与p取模. 解法:只需要考虑两个点之间不 ...

  5. [Everyday Mathematics]20150103

    试求极限$$\bex \vlm{n} \sez{\int_1^{e^2}\sex{\frac{\ln x}{x}}^n\rd x}^\frac{1}{n}.\eex$$

  6. Kettle定时执行(ETL工具)【转】

    1,Kettle跨平台使用.    例如:在AIX下(AIX是IBM商用UNIX操作系统,此处在LINUX/UNIX同样适用),运行Kettle的相关步骤如下:    1)进入到Kettle部署的路径 ...

  7. ExpectationMaximum

    2- You may have question marks in your head, especially regarding where the probabilities in the Exp ...

  8. FZU1686 神龙的难题 dancing links 重复覆盖

    分析:每次可以打一个小矩阵的怪,然后把每个怪看成一列,然后每个小矩阵看成一行,枚举左上角就行 注:然后注意总共的节点数是新图的行*列的个数,不是原图 #include<cstdio> #i ...

  9. 树-伸展树(Splay Tree)

    伸展树概念 伸展树(Splay Tree)是一种二叉排序树,它能在O(log n)内完成插入.查找和删除操作.它由Daniel Sleator和Robert Tarjan创造. (01) 伸展树属于二 ...

  10. Ubuntu firefox falsh

    Ubuntu下为Firefox安装Adobe Flash Player   使用环境:     OS:Ubuntu 12.04 LTS     Browser: Firefox 12.0     Ad ...