首页 > 其他 > 详细

Retina屏下1px border

时间:2014-08-11 14:20:22      阅读:379      评论:0      收藏:0      [点我收藏+]
layouttltletags
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(‘&#xe612;‘).addClass(‘a-search-btn‘);
           $(‘#gallery-page‘).show();
           $(‘#gallery-search‘).hide();
           initBack();
       }
   });


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

Retina屏下1px border,布布扣,bubuko.com

Retina屏下1px border

原文:http://www.cnblogs.com/qiangspecial/p/3904418.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!