自从乔帮主提出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. Android开发笔记：安卓程序截屏方法

    1,基于Android SDK的截屏方法 (1)主要就是利用SDK提供的View.getDrawingCache()方法.网上已经有很多的实例了.首先创建一个android project,然后进行L ...

  2. win7+SQL2008无法打开物理文件 操作系统错误 5:拒绝访问 SQL Sever

    今天在win7+SQL2008的环境下操作分离附加数据库,分离出去然后再附加,没有问题.但是一把.mdf文件拷到其它文件夹下就出错,错误如下:无法打开物理文件 "E:\db\MyDB.mdf ...

  3. ASP.NET用SQL Server中的数据来生成JSON字符串

    原文引自:  作者: 缺水的海豚  来源: 博客园  发布时间: 2010-09-21 21:47  阅读: 6136 次  推荐: 0   原文链接   [收藏] 摘要:ExtJs用到的数据内容基本 ...

  4. work登录页

  5. C#：装箱和拆箱相关知识整理

    1.装箱和拆箱是一个抽象的概念   2. 装箱是将值类型转换为引用类型 ;   拆箱是将引用类型转换为值类型   利用装箱和拆箱功能,可通过允许值类型的任何值与Object 类型的值相互转换,将值类型 ...

  6. 实现跨线程访问UI控件的3种方法

    namespace 多线程 { public partial class Form2 : Form { public Form2() { InitializeComponent(); } privat ...

  7. Groovy创建和解析json

    正文:  在Groovy 1.8发布新闻中,提到Groovy增加了对JSON的支持.Dustin Marx在其博文中,讲述了这一功能的使用. 用法真的很简单,创建一个JSON对象: import gr ...

  8. php $_server 整理

    $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关. $_SERVER['argv'] #传递给该脚本的参数. $_SERVER['argc'] ...

  9. UvaLive 6661 Equal Sum Sets (DFS)

    Let us consider sets of positive integers less than or equal to n. Note that all elements of a set a ...

  10. Dapper中使用存储分页。

    #region 分页获取数据 /// <summary> /// 分页获取数据 /// </summary> /// <typeparam name="T&qu ...