移动设备上的垂直对齐和随机颜色 javascript答案

【问题标题】：Vertical alignment on mobile devices and randomised colour javascript移动设备上的垂直对齐和随机颜色 javascript
【发布时间】：2018-02-28 08:29:57
【问题描述】：

我正在尝试对这个网站进行一些调整，但遇到了一些麻烦。

http://accoutrements.studio

“配饰”徽标应在页面中水平和垂直居中。这似乎在桌面设备上运行良好，但在移动设备上却错位了。更好的例子见截图——https://i.imgur.com/GnRSEmn.png

还有一个脚本可以在您每次点击徽标时随机化颜色。但是我想拥有它，以便页面以黑白方式加载，然后仅在点击时随机化。目前我已经创建了两个单独的页面（/index 和 /colour），但是无论如何要编辑 javascipt，所以我没有两个单独的页面？

当您将鼠标悬停在较小屏幕尺寸的徽标上时，似乎还会出现一个黑框。我不太清楚这是为什么——https://i.imgur.com/pGA7d8U.png

抱歉所有问题，谢谢！

索引

    <!DOCTYPE html>
<html>
<head>
    <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
    <link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
    <link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
    <link href="/manifest.json" rel="manifest">
    <meta content="#ffffff" name="theme-color">
    <meta charset="UTF-8">
    <meta content="Accoutrements is a design studio established in 2016 by Jacob D'Rozario and Joseph Ng." name="description">
    <meta content="Accoutrements, Design, Manchester, Photography, Publishing, Screen Printing" name="keywords">
    <meta content="index,follow" name="robot">
    <meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
    <meta content="Accoutrements" name="author">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Accoutrements</title>
    <link rel="stylesheet" type="text/css" href="accoutrements.css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
</head>
<body>
    <div class="corner_link about">
        <a href="/about">About</a>
    </div>
    <div class="corner_link shop">
        <a href="http://accoutrements.bigcartel.com">Shop</a>
    </div>
    <div class="corner_link catalogue">
        <a href="/catalogue">Catalogue</a>
    </div>
    <div class="corner_link instagram">
        <a href="http://instagram.com/accoutrements.studio">Instagram</a>
    </div>
    <div class="accoutrements">
        <a href="/colour"><svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
        <title>Accoutrements</title>
        <path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
        <path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
        <path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
        <polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
        <polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
        <polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
        <polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
        <path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
        <path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
        <path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
        <path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
        <path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
        <path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg></a>
    </div>
</body>
</html>

颜色

    <!DOCTYPE html>
<html>
<head>
    <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
    <link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
    <link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
    <link href="/manifest.json" rel="manifest">
    <meta content="#ffffff" name="theme-color">
    <meta charset="UTF-8">
    <meta content="Accoutrements is a design studio established in 2016 by Jacob D'Rozario and Joseph Ng." name="description">
    <meta content="Accoutrements, Design, Manchester, Photography, Publishing, Screen Printing" name="keywords">
    <meta content="index,follow" name="robot">
    <meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
    <meta content="Accoutrements" name="author">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Accoutrements</title>
    <link rel="stylesheet" type="text/css" href="accoutrements.css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>

</head>
<body>
    <div class="corner_link about">
        <a href="/about">About</a>
    </div>
    <div class="corner_link shop">
        <a href="http://accoutrements.bigcartel.com">Shop</a>
    </div>
    <div class="corner_link catalogue">
        <a href="/catalogue">Catalogue</a>
    </div>
    <div class="corner_link instagram">
        <a href="http://instagram.com/accoutrements.studio">Instagram</a>
    </div>
    <div class="accoutrements">
        <svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
        <title>Accoutrements</title>
        <path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
        <path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
        <path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
        <polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
        <polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
        <polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
        <polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
        <path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
        <path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
        <path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
        <path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
        <path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
        <path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg> 
        <script>
                  var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
                  var rand = function() {
                  return Math.floor(Math.random() * 6);
                  };
                  var randomColor = function() {
                  var r = safeColors[rand()];
                  var g = safeColors[rand()];
                  var b = safeColors[rand()];
                  return "#" + r + g + b;
                  };
                  var color_1 = randomColor();
                  var color_2 = randomColor();
                  $(document).ready(function() {
                  color_change();
                  $('#accoutrements').click(function() {
                      color_change();
                  });
                  });
                  function color_change() {
                  color_1 = randomColor();
                  color_2 = randomColor();
                  $('.corner_link a').css('color', color_1);
                  $('.accoutrements').css('fill', color_1);
                  $('body').css('background', color_2);
                  $('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
                  }
        </script>
    </div>
</body>
</html>

CSS

   body {
    font-family: 'Work Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 0px;
    line-height: 27px;
    font-weight: 400;
    color: #111;
    background-color: #fff;
   }

   .about {
    position: fixed;
    right: 40px;
    bottom: 40px;
   }

   .shop {
    position: fixed;
    right: 40px;
    top: 40px;
   }

   .catalogue {
    position: fixed;
    left: 40px;
    top: 40px;
   }

   .instagram {
    position: fixed;
    left: 40px;
    bottom: 40px;
   }

   a img {
     text-decoration: none;
     border:none;
     border-bottom-style: none;
   }

   a:link {
    text-decoration: none;
    color: #111;
   }

   a:visited {
    text-decoration: none;
    color: #111;
   }

   a:hover {
    background-color: #111;
    color: #fff;
    text-decoration: none;
   }

   a:active {
    text-decoration: none;
    color: #111;
   }

   .accoutrements {
    top: 50%;
    margin-top: 50vh;
    transform: translateY(-50%);
    cursor: pointer;
   }

   svg.logo {
    position: relative;
    max-width: 80%;
    left: 10%;
   }

   svg.logo:emptyc {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   }

   @media screen and (min-width: 1000px) {
    svg.logo {
        max-width: 800px;
        position: inherit;
        display: block;
        margin: auto;
    }
   }

   .text {
    top: 50%;
    margin-top: 50vh;
    transform: translateY(-50%);
    margin-left: 20px;
    margin-right: 20px;
   }

【问题讨论】：

标签： javascript html css mobile vertical-alignment

【解决方案1】：

要修复黑匣子，请删除 css 中的以下代码

   a:hover {
    background-color: #111;
    color: #fff;
    text-decoration: none;
   }

对齐问题在我看来在所有设备上都很好。经过测试。

要解决着色问题，无需单独的页面。页面加载后，您可以执行脚本。假设您想在 5 秒后为页面着色，那么您的代码将如下所示：

    $(document).ready(function() {
        setTimeout(function(){
            // Your color logic
        }, 5000);
    });

所以只把这个脚本放在你的索引页中：

 $(document).ready(function() {
                setTimeout(function(){
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
                  var rand = function() {
                  return Math.floor(Math.random() * 6);
                  };
                  var randomColor = function() {
                  var r = safeColors[rand()];
                  var g = safeColors[rand()];
                  var b = safeColors[rand()];
                  return "#" + r + g + b;
                  };
                  var color_1 = randomColor();
                  var color_2 = randomColor();
                  $(document).ready(function() {
                  color_change();
                  $('#accoutrements').click(function() {
                      color_change();
                  });
                  });
                  function color_change() {
                  color_1 = randomColor();
                  color_2 = randomColor();
                  $('.corner_link a').css('color', color_1);
                  $('.accoutrements').css('fill', color_1);
                  $('body').css('background', color_2);
                  $('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
                  }
                }, 5000);
            });

【讨论】：

我已经解决了 Javascript 的点击功能，添加了：$(document).click(function(){ 这也修复了 svg 上的悬停效果，因为它不再是活动链接。对我来说，它仍然没有在 iPhone/iPad 上正确对齐。我得到一个垂直错位。这可能是 iOS Safari 的问题吗？您使用的是哪种浏览器/移动设备？谢谢。
可能是 iOS 问题。我在浏览器的移动模拟器上测试过。
是的，它在 Chrome 响应模式下看起来不错，但在实际的移动设备上却不行。这就是它在 iOS Safari 上的样子——i.imgur.com/GnRSEmn.png