设计图上的标注要有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. 018 4Sum 四个数的和

    给定一个含有 n 个整数的数组 S,数列 S 中是否存在元素 a,b,c 和 d 使 a + b + c + d = target ?请在数组中找出所有满足各元素相加等于特定值的不重复组合.注意:解决 ...

  2. keil编译器

    1 数组比指针效率高. 2 v4.73不能查看局部变量的值:可先将C/C++选项下的优化级别设置成O0,查看完之后修改回去.因默认级别是2级.

  3. UVALive - 6442

    题目链接:https://vjudge.net/contest/241341#problem/I 题目大意:输入t,t组样例,输入n,m,有n个圆槽,m个硬币,接下来m行代表每个硬币所在的位子,要求你 ...

  4. python学习四(处理数据)

    head first python中的一个数据处理的例子 有四个U10选手的600米成绩,请取出每个选手跑的最快的3个时间.以下是四位选手的9次成绩 James 2-34,3:21,2.34,2.45 ...

  5. placeholder设置默认显示

    <textarea rows="4" cols="50" placeholder="请在此处介绍自己..."> </tex ...

  6. MapReduce 二次排序

    默认情况下,Map 输出的结果会对 Key 进行默认的排序,但是有时候需要对 Key 排序的同时再对 Value 进行排序,这时候就要用到二次排序了.下面让我们来介绍一下什么是二次排序. 二次排序原理 ...

  7. 新手写AIDL构建失败：...aidl.exe'' finished with non-zero exit value 1

    最近学习aidl,写demo后编译报错,跟着<Android开发艺术探索>以及网上的一些aidl详解博客敲完后一直编译不过,错误日志如下: Process 'command 'C:\Use ...

  8. discuz迁移到虚拟空间后无法上传图片的问题

    discuz X3迁移到虚拟空间后无法上传图片,提示"附件无法保存": 解决方法: 1.看看虚拟空间的容量是不是满了. 2.登录管理员后台,工具->更新缓存.

  9. matlab 常用函数(数学建模-复习)

    常用函数 fscanf(fid, '%c', inf) -> 直接读取整个文件, 因为inf表示无穷 strtrim char(num): 将num转为ASCII字符 strtok(conten ...

  10. spring技术小结

    1.DI和IOC 依赖注入(Dependency Injection)还是控制反转(Inversion of Conctrol) bean通过依赖注入,注册到spring容器里面.spring容器通过 ...