设计图上的标注要有1px的线条，css本来以为直接写个1px就能万事大吉了，手机上怎么看都很粗。

至于具体为什么会这样，百度看了一圈，有点懵懵懂懂，大概就是物理分辨率高于实际网页的像素分辨率的原因吧。

试过了几种办法：

1. 阴影设置RGBA

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="utf-8" />

    <style type="text/css">

        .page {

            max-width: 750px;

            margin: 0 auto;

            padding: 0;

        }

        #testLine {

            height: 100px;

            width: 100px;

            -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);

            -ms-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);

            box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);

            border-radius: 5px;

        }

    </style>

</head>

<body>

    <div id="testLine">

    </div>

</body>

</html>

圆角支持，手机上效果不错，线条看起来没那么粗，也挺和谐的，缺点颜色不好调。

2.渐变

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="utf-8" />

    <style type="text/css">

        .page {

            max-width: 750px;

            margin: 0 auto;

            padding: 0;

        }

        #testLine {

            background-image: -webkit-linear-gradient(#000 50%,transparent 50%);

            background-image: linear-gradient(#000 50%,transparent 50%);

            background-size: 100% 1px;

            background-repeat: no-repeat;

            background-position: bottom;

            height: 50px;

        }

    </style>

</head>

<body>

    <div id="testLine">

    </div>

</body>

</html>

这种划线颜色是支持最好的，基本可以调整到设计的颜色要求，但是圆角呢，感觉有点困难，因为当前的项目只需要画个直线，所以采用了这个

1px移动端显示问题的更多相关文章

  1. pc端页面在移动端显示问题

    1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...

  2. 关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结

    关于dl  dt dd 文字过长换行在移动端显示对齐的探讨总结 <dl> <dt>抵押房产:</dt> <dd>1.北京市大兴区兴华大街丽园小区3单大兴 ...

  3. Ubuntu下ssh连接在服务端显示图形界面

    Ubuntu下ssh连接在服务端显示图形界面 step1 安装ssh服务 服务端安装运行ssh,在终端运行命令如下: sudo apt-get install openssh-server 在客户端安 ...

  4. 学习EChart.js（四） 移动端显示

    ECharts.js 移动端显示 现在很多时候,我们是在用手机.pad等一些移动端设备来进行办公获取数据.所以我们的图表很多时候是需要用移动端设置来查看的,而我们的图表有时候因为数据的偏多,会出现遮挡 ...

  5. checkbox 在移动端显示为小圆圈问题

    在desktop显示正常,但是在移动端显示变为小圆圈,无法正确展示选中取消选中效果问题解决方案: display: block; width: 58px; height: 20px; -webkit- ...

  6. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

  7. 解决poshytip 表单高度大于屏幕高端 显示问题

    Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提示条.信息的内容直接可以在HTML里设定也可以是从服务端调用的数据,该插件还提供了很多属性和方法. ...

  8. 设置UITableView的separatorInset值为UIEdgeInsetsZero，分隔线不最左端显示的问题

    一.问题描述 UITableView分割线要显示到最左端 查看UITableView的属性,发现设置separatorInset的值可以自定义分割线的位置. @property (nonatomic) ...

  9. iOS拍照上传后，在web端显示旋转 Swift＋OC版解决方案

    问题描述: 手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在web端查看会有一个左旋90度的问题. 并且照片竖怕才会有此问题,横拍不存在. 原因分析: 手机拍照时,用相机拍摄出来 ...

随机推荐

  1. 网络安全基础之arp

    ARP(Address Resolution Protocol),中文解释为地址解析协议,是根据IP地址获取物理地址的一个TCP/IP协议. ARP大致工作流程如下: 主机发送信息时将包含目标IP地址 ...

  2. QQ的全国地址编码

    D:\Program Files (x86)\Tencent\QQ\I18N\2052\LocList.xml

  3. ElasticSearch 全文检索— ElasticSearch 核心概念

    ElasticSearch核心概念-Cluster 1)代表一个集群,集群中有多个节点,其中有一个为主节点,这个主节点是可以通过选举产生的,主从节点是对于集群内部来说的.es的一个概念就是去中心化,字 ...

  4. HQL语句中的join fetch

    from Paper as paper join fetch paper.authors as authors where authors.id='xxxx'; from Paper as paper ...

  5. StringMVC返回字符串

    @RequestMapping(value="twoB.do") public void twoBCode(HttpServletRequest request,HttpServl ...

  6. 邓俊辉数据结构学习-8-2-B树

    B树 概述 动机: B树实现高速I/O 640K如何"满足"任何实际需求了-- 源自比尔·盖茨的一个笑话 前提知识 高速缓存 为什么高速缓存有效? 不同容量的存储器,访问速度差异悬 ...

  7. hadoop集群搭建简要记录

    2019/03/09 21:46 准备4台服务器或者虚拟机[centos7],分别设置好静态ip[之所以设置静态ip主要就是为了省心!!!][ centos7下面配置静态IP  参考地址: https ...

  8. poj3334(Connected Gheeves)

    Connected Gheeves Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 1008   Accepted: 368 ...

  9. Eucalyptus常用查询命令

    前言: Elastic Utility Computing Architecture for Linking Your Programs To Useful Systems (Eucalyptus)  ...

  10. 实战：ADFS3.0单点登录系列-集成SharePoint

    这是本系列第四篇了,终于轮到SharePoint上场了,但是本文不会过多讲解SharePoint安装等话题,而是直入主题,讲解如何进行配置,让其于ADFS配合完成SSO的工作. 注意:本文使用的Sha ...