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

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

.border:after {

  position: absolute; 

  content: '';

  width: 100%;

  left: 0;

  bottom: 0;

  height: 1px;

  background-color: #e3e5e9;

  -webkit-transform: scale(1, 0.5);

  transform: scale(1, 0.5);

  -webkit-transform-origin: center bottom;

  transform-origin: center bottom;

}

通过缩放来兼容iso机

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

.border::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
border: 1px solid #eee;
transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
box-sizing: border-box;
}

通过整体缩放来进行兼容

小程序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. 利用Java EE里jsp制作登录界面

    jsp连接数据库.百度经验. 1.在新建的Project中右键新建Floder 2.创建名为lib的包 3.创建完毕之后的工程目录 4.接下来解压你下载的mysql的jar包,拷贝其中的.jar文件 ...

  2. Java学习——内存机制

    Java学习——内存机制 摘要:本文主要介绍了Java的内存机制. 部分内容来自以下博客: https://www.cnblogs.com/xrq730/p/4827590.html https:// ...

  3. open*** 搭建

    pptp 互联网上服务商给拦截.不稳定. opevpn 1.为了保证OpenVPN的安装,需要使用easy-rsa秘钥生成工具生成证书 [root@m01 ~]# yum install easy-r ...

  4. Java开发常用知识点总结

    docker exec -it imageId redis-cli docker container ls -a docker rm containerId 复制目录&文件 cp -r /ro ...

  5. vue打包后刷新页面报错:Unexpected token <

    前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有 ...

  6. tushare库:免费的python财经数据接口

    tushare官网以及在线文档http://tushare.org/ 安装    pip install -i https://pypi.tuna.tsinghua.edu.cn/simple tus ...

  7. 【Spring Boot】Spring Boot之使用ImportBeanDefinitionRegistrar类实现动态注册Bean

    一.ImportBeanDefinitionRegistrar类介绍 ImportBeanDefinitionRegistrar类通过其他@Configuration类通过@Import的方式来加载, ...

  8. 09、日志轮转+rsync同步

    logrotate   -  rotates,  compresses,  and    mails system logs 日志轮转 rotate 日志切割 轮转   切割   备份   归档 常见 ...

  9. vue-cli 3 和 vue-cli 2的区别

    分享文章: 浅谈vue-cli 3 和 vue-cli 2的区别 https://blog.csdn.net/weixin_42080056/article/details/81631661 vue- ...

  10. maven项目目录(二)

    -- 项目目录 --src 项目中的所有资源 --main 存放开发代码和资源 --java 项目的java源代码 --resources 项目的资源文件,源代码之外的其他文件 --test 存放测试 ...