自从乔帮主提出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. java工程中使用freemarker例子

    新建java project,引入freemarker.jar, 本工程是用的版本:freemarker-2.3.20 版本 java工程目录如下: test.ftl文件 HTML代码 name : ...

  2. 创建 序列 存储过程 job

    掌握了 oracle中的 dbms_lock 函数,该函数 主要用于暂停执行的程序 1.用意 写job 以10分钟 为单元,前10分钟 从 1到10 插入测试表, 中间10分钟从 11到20插入测试表 ...

  3. angularJS学习手册（1）

    欢迎来到augularJS的学习 一.什么是angularJS? angular的英文意思是角,为什么要叫angular我也不知道. AngularJS是一个MV*(Model-View-Whatev ...

  4. ubuntu下apache与php配置

    实验环境 uname -a Linux tomato 4.4.0-34-generic #53-Ubuntu SMP Wed Jul 27 16:06:39 UTC 2016 x86_64 x86_6 ...

  5. underscorejs-indexBy学习

    2.19 indexBy 2.19.1 语法 _.indexBy(list, iteratee, [context]) 2.19.2 说明 给定一个list,和 一个用来返回一个在列表中的每个元素键 ...

  6. System.InvalidOperationException: 无法加载协定为“ServiceReference1.XXXXXXXXXXXXXXXX”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。

    <system.serviceModel> <bindings> <basicHttpBinding> <binding name="testWeb ...

  7. PHP应用程序的安全性

    无论在开发中,还是在面试时或者技术讨论时,安全性都是需要深入了解及掌握的. 目标 本教程目标是使您了解应该如何保护自己构建的 Web 应用程序.讲解如何防御最常见的安全威胁:SQL 注入.操纵 GET ...

  8. C# Ini文件操作

    在开源中国看到的操作ini文件的,写的还不看,留着以后用 using System; using System.IO; using System.Runtime.InteropServices; us ...

  9. Delphi-Delete 过程

    过程名称 Delete 所在单元 System 过程原型 procedure Delete ( var Source : string; StartChar : Integer; Count : In ...

  10. 手把手教你使用python复杂一点点的装饰器

    #只要@deco后面跟括号,都要 先传装饰器参数,返回 再传目标待装饰函数,返回 传目标函数的参数 #这个参数可以是类 def deco(arg):#装饰器的函数在这里传 print('0',arg) ...