设计图上的标注要有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. Linux安装配置相关

    1.常用汇总 useradd usertemp //添加用户 passwd usertemp //修改/设置密码 userdel usertemp //删除用户 2. profile/baserc等配 ...

  2. 详细介绍VO(值对象)和PO(持久对象)的区别

    VO,值对象(Value Object),PO,持久对象(Persisent Object),它们是由一组属性和属性的get和set方法组成.从结构上看,它们并没有什么不同的地方.但从其意义和本质上来 ...

  3. Promise 用es5的基础实现

    只实现 then 和 catch function promise(fn) { var state = 'pending'; // 声明函数 var nowResolve = function (ar ...

  4. 在C#中，为什么大家用httpcontext.current,不直接用HttpContext

    HttpContext只是个类名,HttpContext.Current才是一个已实例化的对象..比如这样一个类: class A{ public static A Current{get;set;} ...

  5. ace admin 左侧菜单定位

    后台模版来自:Ace Admin http://ace.jeka.by/form-elements.html 左侧菜单,通过js根据url来判断显示哪块 window.location.pathnam ...

  6. thinkphp搜索实现

    视图: <html lang="zh-cn"><head> <meta charset="UTF-8"><title& ...

  7. iOS JS 交互之利用系统JSContext实现 JS调用OC方法以及Objective-C调用JavaScript方法

    ios js 交互分为两块: 1.oc调用js 这一块实现起来比较简单, 我的项目中加载的是本地的html,js,css,需要注意的是当你向工程中拖入这些文件时,选择拷贝到工程中,(拖入的文件夹是蓝色 ...

  8. nmap --script http-enum,http-headers,http-methods,http-php-version -p 80 目标域

    从http服务器上收集到更多地信息 nmap --script http-enum,http-headers,http-methods,http-php-version  -p 80 目标域

  9. Miller-Rabbin 素性测试 和 Pollard_rho整数分解

    今天学习一下Miller-Rabbin  素性测试 和 Pollard_rho整数分解. 两者都是概率算法. Miller_Rabbin素性测试是对简单伪素数pseudoprime测试的改进. (ps ...

  10. 增强的格式化字符串format函数

    http://blog.csdn.net/handsomekang/article/details/9183303 自python2.6开始,新增了一种格式化字符串的函数str.format(),可谓 ...