切换风格

后盾网PHP论坛-php培训论坛-php教程-PHP视频教程-北京PHP培训

  • 咨询热线: 400-682-3231
  • QQ咨询: 联系在线客服老师 联系在线客服老师 联系在线客服老师

QQ登录

只需一步,快速开始

返回列表 发新帖

[web前端] 用JS动态设置viewport标签后,div块之间出现白线

[复制链接]
     
  • TA的每日心情
    开心
    2017-7-13 09:45
  • 签到天数: 39 天

    [LV.5]常住居民I

    4

    主题

    313

    帖子

    3325

    积分

    高中生

    Rank: 5Rank: 5

    积分
    3325
    活动推广币
    0 个
    后盾币
    3325 个
    注册时间
    2012-10-9
    在线时间
    41 小时
    帖子
    313
    发表于 2017-7-10 14:45:25 |显示全部楼层 | 阅读模式
    手机页面宽度设置为固定值640。通过js对viewport标签进行动态设置设置,实现屏幕动态适配
    但是有一个问题,在安卓系统下,通过这种方法更改viewport后,div块之间会出现很细的白线(类似于没有进行 img{display:block;}设置一样,但是我已经设置了这个属性),百思不得其解 (pc端和苹果端是正常的,只有安卓端和chrome在手机模式下调试,才可以见到这些白线)
    忘各位大神帮忙解答,不胜感激
    QQ截图20170710143358.jpg
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta name="viewport" content="width=640, minimum-scale=0.5625, maximum-scale=0.5625, target-densitydpi=device-dpi">

    5.         <script type="text/javascript">
    6.                 /*屏幕适配*/
    7.                 if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
    8.                         var version = parseFloat(RegExp.$1);
    9.                         if(version>2.3){
    10.                                 var phoneScale = parseInt(window.screen.width)/640;
    11.                                  document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
    12.                         }else{
    13.                                 document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
    14.                         }
    15.                 }else{
    16.                         document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
    17.                 }
    18.         </script>
    19.         <meta charset="UTF-8">
    20.         <title>带viewport</title>
    21.         <style type="text/css">
    22.         *{margin: 0; padding: 0; list-style: none; border: none;}
    23.         img{display: block;}
    24.         .main{width: 640px; margin: 0 auto; }
    25.         .pic img{width: 100%;}
    26.         </style>
    27. </head>
    28. <body>
    29.         <div class="main">
    30.                 <div class="pic"><img src="img/1.jpg" ></div>
    31.                 <div class="pic"><img src="img/2.jpg" ></div>
    32.                 <div class="pic"><img src="img/3.jpg" ></div>
    33.                 <div class="pic"><img src="img/4.jpg" ></div>
    34.                 <div class="pic"><img src="img/5.jpg" ></div>
    35.         </div>

    36. </body>
    37. </html>
    复制代码
    代码打包如下

    error.rar

    28.21 KB, 下载次数: 12

    源码打包

         
  • TA的每日心情
    擦汗
    1 小时前
  • 签到天数: 2300 天

    [LV.Master]伴坛终老

    5060

    主题

    2万

    帖子

    286万

    积分

    管理员

    ★后盾论坛大管家老鱼★

    Rank: 9Rank: 9Rank: 9

    积分
    2868649
    活动推广币
    12685 个
    后盾币
    2868649 个
    注册时间
    2011-5-5
    在线时间
    8500 小时
    帖子
    23259

    终身成就奖优秀斑竹奖宣传大使奖特殊贡献奖金点子奖原创先锋奖金秋活动荣誉勋章灌水天才奖新人进步奖签到达人奖

    QQ
    发表于 2017-7-12 15:21:19 |显示全部楼层
    我测了一下,苹果真机上没问题,安卓有白线,不明白你为什么要设置黑色的背景图呢,直接设置黑色就行啊。
         
  • TA的每日心情
    开心
    2017-10-25 22:36
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    0

    主题

    10

    帖子

    64

    积分

    幼儿园

    Rank: 1

    积分
    64
    活动推广币
    0 个
    后盾币
    64 个
    注册时间
    2017-7-12
    在线时间
    1 小时
    帖子
    10
    发表于 2017-7-12 23:56:38 |显示全部楼层
    没看出问题出在哪儿
         
  • TA的每日心情
    开心
    2017-7-13 09:45
  • 签到天数: 39 天

    [LV.5]常住居民I

    4

    主题

    313

    帖子

    3325

    积分

    高中生

    Rank: 5Rank: 5

    积分
    3325
    活动推广币
    0 个
    后盾币
    3325 个
    注册时间
    2012-10-9
    在线时间
    41 小时
    帖子
    313
    发表于 2017-7-13 09:47:58 |显示全部楼层
    深水鱼 发表于 2017-7-12 15:21
    我测了一下,苹果真机上没问题,安卓有白线,不明白你为什么要设置黑色的背景图呢,直接设置黑色就行啊。

    多谢老师的帮忙。
    之所以设置成黑色的图片背景,是为了方便大家在安卓下看到这些白线。
    在正常工作中,背景图会是一张设计好的图片。那么在设计好的图片上,就会出现这些白线。请问老师有没有方法把这些白线解决掉?

    发表回复

    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    快速回复 返回顶部 返回列表