在ios系统上1px的边框会变成2px,ui会感觉很粗

列表间隔,只需要一条边框

  1. .border:after {
  2.  
  3. position: absolute;
  4.  
  5. content: '';
  6.  
  7. width: 100%;
  8.  
  9. left: 0;
  10.  
  11. bottom: 0;
  12.  
  13. height: 1px;
  14.  
  15. background-color: #e3e5e9;
  16.  
  17. -webkit-transform: scale(1, 0.5);
  18.  
  19. transform: scale(1, 0.5);
  20.  
  21. -webkit-transform-origin: center bottom;
  22.  
  23. transform-origin: center bottom;
  24.  
  25. }

通过缩放来兼容iso机

我们时常会遇到另外一种情况,就是页面中的小tag 四边boder

  1. .border::before {
  2. content: '';
  3. position: absolute;
  4. width: 200%;
  5. height: 200%;
  6. border: 1px solid #eee;
  7. transform-origin: 0 0;
  8.   -webkit-transform-origin: 0 0;
  9. transform: scale(0.5, 0.5);
  10. -webkit-transform: scale(0.5, 0.5);
  11. box-sizing: border-box;
  12. }

通过整体缩放来进行兼容

小程序1px边框在苹果机上变粗问题的更多相关文章

  1. 微信小程序禁止刷新之后苹果端还可以下拉的问题

    一.问题描述 最近在做一个小程序项目,需要禁止下拉刷新,于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全局关闭下拉刷新,这段 ...

  2. 用小程序做一个类似于苹果AssistiveTouch功能

    一.首先我先介绍一下,我们要做一个什么样的项目功能 项目功能就是一个音频点击播放,当点击为播放的状态时,一个音频的动图出现,而且是可以跟随着手指的滑动而滑动,而且,在滑动动图的时候,当前下的页面是不可 ...

  3. 微信小程序的z-index在苹果ios无效

    1.在微信开发者工具可以正常显示 2.在安卓真机手机可以正常显示 3.在ios手机真机无法正常显示 原因:父级view的css属性有 position: fixed; ,把它注释掉即可

  4. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  5. 微信小程序 drawImage 问题

    好久没写了,其实可写的还是挺多,主要还是懒吧... 最近公司项目使用小程序做序列帧动画,大概有 116 张图,共9.6M. 比较闲的日子里实验了一番,主要有以下几种方法, 1. css backgro ...

  6. 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序

    1.前言 2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间.连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保 ...

  7. 微信小程序开发教程

    9月21日晚发布的微信公众平台·小程序内侧邀请,微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子? 怎样 ...

  8. 微信小程序实战笔记

    前言: 微信小程序最近刚从鹅厂生产出来,我有幸参与了一次小程序的实战,有必要记录我的开发过程.看上去小程序很简单,但是在深入开发的时候才能具体体会里面的变化,接下来记录我的第一个微信小程序的点点滴滴! ...

  9. 微信小程序内测申请

    想申请微信小程序的内测?别做梦了! 小程序内测是邀请制的,目前就发放了200个内测邀请.正因为稀缺,江湖传言内测资格已经炒到300万(一套房)一个了 但是!!!!你可以先熟悉一下相关资料和文档,下载一 ...

随机推荐

  1. preventDefault, stopPropagation, return false -JS事件处理中的坑

    我们以一个文件上传ui重设计为例子来探讨这几个函数的区别: 其中的html代码如下: <div class="file-upload"> <input type= ...

  2. PyTestReport 自动化报告

    安装 pip install PyTestReport pytest框架执行命令 pytest.main(["-s", "test_login.py", &qu ...

  3. java基本程序设计结构总结

    学习一门语言:(1)掌握它的表现形式(2)这些语言什么应用. 1.1关键字 1.关键字是被赋予了特殊含义的单词. 2.关键字特点:关键字所有字母都小写. 3.类名的每一个单词开头必须大写. 1.2标识 ...

  4. linux桌面系统的约定

    linux系统的桌面系统基本遵循同样的约定. mime类型 在linux下,关于文件类型的信息通常放在/usr/share/mime./usr/local/share/mime和用户目录下,所有应用程 ...

  5. ASP.NET Core系列:读取配置文件

    1. 控制台应用 新建一个控制台应用,添加两个Package: Install-Package Microsoft.Extensions.Configuration Install-Package M ...

  6. SQL Server学习内容(一)

    SQL Server SQL Server对大小写不敏感,每条语句末端使用分号. 1.SQL命令 SELECT 从数据中提取数据 UPDATE 更新数据中的数据 DELETE 从数据库中删除数据 IN ...

  7. 在Ubuntu下使用nginx-rtmp-module搭建直播系统

    直播系统最简单地包括推流和拉流,在这里先使用nginx-rtmp-module作为流媒体服务器. 流媒体服务器搭建 1. nginx-rtmp-module下载和安装 源码地址:https://git ...

  8. shell-基础2

    条件表达式 文件判断 文件测试操作符 常用文件测试操作符 说明 -d文件,d的全拼为directory 文件存在且为目录则为真,即测试表达式成立 -f文件,f的全拼为file 文件存在且为普通文件则为 ...

  9. java执行hive命令或者脚本

    java执行脚本 import java.io.*; import java.text.DateFormat; import java.text.SimpleDateFormat; import ja ...

  10. zz 机器学习系统或者SysML&DL笔记

    机器学习系统或者SysML&DL笔记(一)  Oldpan  2019年5月12日  0条评论  971次阅读  1人点赞 在使用过TVM.TensorRT等优秀的机器学习编译优化系统以及Py ...