设计图上的标注要有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. 数据库的 2个参数 NLS_LENGTH_SEMANTICS 说明，comment 说明

    ############### sample 1: NLS_LENGTH_SEMANTICS 1.数据库字符集选择的是NLS_CHARACTERSET=UTF8,如果NLS_CHARACTERSET= ...

  2. Unity C# 反射

    什么是反射 在.NET中的反射也可以实现从对象的外部来了解对象(或程序集)内部结构的功能,哪怕你不知道这个对象(或程序集)是个什么东西,另外.NET中的反射还可以运态创建出对象并执行它其中的方法. 反 ...

  3. Redis中String类型的Value最大可以容纳数据长度

    项目中使用redis存储,key-value方式,在Redis中字符串类型的Value最多可以容纳的数据长度是512M 官方信息: A String value can be at max 512 M ...

  4. js识别中英文字符的字节长度并进行裁切

    //调用方法,传入字符串和需要返回的字节长度即可function cutstr(str,len){ var str_length = 0; var str_len = 0; str_cut = new ...

  5. Lua学习---函数定义

    1．函数定义的格式: Lua使用function定义函数,语法如下: function function_name (arc) --arc表示参数列表,函数的参数列表可以为空 --body end 上 ...

  6. 本人常用的Phpstorm快捷键

    我设置的是eclipse的按键风格(按键习惯),不是phpstorm的风格 1.添加TODO(这个不是快捷键)://TODO 后面是说明,换行写实现代码 2.选择相同单词做一次性修改:Alt+J+鼠标 ...

  7. hadoop2.4 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable

    在Ubuntu上安装完hadoop2.4以后,使用以下命令: hadoop fs -ls // :: WARN util.NativeCodeLoader: Unable to load native ...

  8. 流媒体 5——MPEG声音

    1. 听觉系统的感知特性: MPEG声音的数据压缩和编码不是依据波形本身的相关性和模拟人的发音器官的特性,而是利用人的听觉系统的特性来达到压缩声音数据的目的,这种压缩编码称为感知声音编码. 许多科学工 ...

  9. iphone 弹出键盘，文本框自动向上移动。

    1.让类继承UITextViewDelegate UITextView *inputTextView;UIScrollView * _scrollView; 2.在init函数中先创建scrollVi ...

  10. IOS 核心动画（Core Animation）

    Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它 能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就 可以实现非常强大的功能. Core ...