自从乔帮主提出retina屏以来。可练就了不少前端兄弟的像素眼，有强迫症的伙伴们日子可就煎熬了。为了画出真正的1像素边框，前端猿们也是受尽各浏览器的虐待了。

关于什么是移动端1像素边框问题，先上两张图，大家就明白了。

图1

图2

实现1PX边框的方法有很多，各有优缺点，比如通过背景图片实现、通过transform: scale(0.5)实现。本次实现的是通过VIEWPORT+rem实现的，优点是可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难、圆角阴影失效问题。缺点嘛，这方法适全新项目，如果老项目想用这种方法，改动量估计会比较大。

<span style="font-size:18px;"><html>

    <head>

        <title>1px question</title>

        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

        <style>

            html {

                font-size: 1px;

            }

            * {

                padding: 0;

                margin: 0;

            }

            .bds_b {

                border-bottom: 1px solid #ccc;

            }

            .a,

            .b {

                margin-top: 1rem;

                padding: 1rem;

                font-size: 1.4rem;

            }

            .a {

                width: 30rem;

            }

            .b {

                background: #f5f5f5;

                width: 20rem;

            }

        </style>

        <script>

            var viewport = document.querySelector("meta[name=viewport]");

            //下面是根据设备像素设置viewport

            if (window.devicePixelRatio == 1) {

                viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');

            }

            if (window.devicePixelRatio == 2) {

                viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');

            }

            if (window.devicePixelRatio == 3) {

                viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');

            }

            var docEl = document.documentElement;

            var fontsize = 10 * (docEl.clientWidth / 320) + 'px';

            docEl.style.fontSize = fontsize;

        </script>

    </head>

    <body>

        <div class="bds_b a">下面的底边宽度是虚拟1像素的</div>

        <div class="b">上面的边框宽度是虚拟1像素的</div>

    </body>

</html></span>

想看效果的，直接将代码复制下来放服务器，用手机浏览就可以看到效果了。

【H5开发基础】移动端1像素边框问题的解决方案的更多相关文章

  1. 移动端 1px 像素边框问题的解决方案（Border.css）

    前言 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案 将以下代码放在border.css文件中,然后引入 常用className border:整个盒子都有边框 border-t ...

  2. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  3. H5开发基础之像素、分辨率、DPI、PPI

    H5开发基础之像素.分辨率.DPI.PPI  html5  阅读约 4 分钟 ​2016-09-03于坝上草原 背景知识: 目前绝大部分显示器都是基于点阵的,通过一系列的小点排成一个大矩形,通过每个小 ...

  4. 移动端一像素边框解决方案[css scale]

    新建一个border.css的文件,然后将代码复制粘贴,然后引用border.css样式文件,然后给需要添加边框的元素,加相应的类样式. tips: border-bottom[一像素下边框]:bor ...

  5. 移动web开发基础（一）——像素

    这篇文章要弄清楚2个问题:一.什么是逻辑像素和物理像素:二.这两者有什么关系. 对于问题一,先抛出两个概念.我们经常使用的px就是逻辑像素,是浏览器使用的抽象单位:物理像素又和dp/pt(设备无关像素 ...

  6. stylus解决移动端1像素边框的问题

    首先 我是借用了yo框架的border和他的媒体查询组合 这两个分别是在yo>lib>core>classes>_border.scss(用来获取yo框架封装的border) ...

  7. 移动web 1像素边框

    实现方法 border-image 图片 实现 这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 <使用border-image实现类似iOS7的1px底边> ...

  8. 带你使用h5开发移动端小游戏

    带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...

  9. IM开发基础知识补课(七)：主流移动端账号登录方式的原理及设计思路

    1.引言 在即时通讯网经常能看到各种高大上的高并发.分布式.高性能架构设计方面的文章,平时大家参加的众多开发者大会,主题也都是各种高大上的话题——什么5G啦.AI人工智能啦.什么阿里双11分分钟多少万 ...

随机推荐

  1. jq之简单表单验证

    <body> <form method="post" action=""> <div class="int"& ...

  2. HTML5 离线缓存详解（转）

    离线缓存是html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  3. jAVA EE里什么是链式调用

    链式调用就是每次调用完了过后返回的是自己,比如Hibernate里面执行hql需要设置参数时,每次设置完参数可以继续使用点设置下一个参数http://blog.sina.com.cn/s/blog_4 ...

  4. angular.js学习手册（二）

    如何使用angularjs? 各个 angular.js 版本下载: https://github.com/angular/angular.js/releases 下载完之后,在你需要使用angula ...

  5. javascript入门学习笔记

    <button type="button" onclick="alert('Welcome!')">点击这里</button>alert ...

  6. 深入理解offsetTop与offsetLeft

    做为走上前端不归路的我,以前只是认为offsetTop是元素的左边框至包含元素offsetParent的左内边框之间的像素距离,同理offsetRight是相对于上内边框.那么问题来了,包含元素off ...

  7. jQuery MVC 科室异步联动

    //科室改变,级联医生 js $("#DepartmentId").change(function () { if (isNaN($(this).val())) { $(" ...

  8. window.showModalDialog以及window.open用法简介

    .可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象.例如:------------------------------parent.htm<script& ...

  9. Python学习笔记：06魔法方法和迭代器

    魔法方法,属性和迭代器 新式类 通过赋值语句__metaclass=true或者class NewStyle(object)继承内建类object,可以表明是新式类. 构造方法 对象被创建后,会立即调 ...

  10. python中函数的默认参数陷阱问题

    其实也不能说是陷阱,只是一个不容易注意到的地方,尤其是有其他java/c++类编程语言经验的人员,这里涉及到python的一个特点,所以笔者说是陷阱只是一个噱头而已. def test(item, b ...