javascript - 为什么我的网站在移动设备上左对齐

问题描述

我的网站在移动设备上左对齐，但（移动版本）在桌面上看起来不错。我尝试过搞砸一些事情，但在这一点上我放弃了。

我还遇到了一个问题，即页面最初加载元素时不合适，但是当您刷新页面时，它们会得到修复；如果你能解决这个问题，可以加分！

HTML

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    
    <title>ᘿ᙭ᕵᒪᓍᖇᗩᖇ</title>
    <link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
    <link href="mobileStyle.css" rel="stylesheet" type="text/css" media="all">
</head>
<body onresize="resized()">
<div class="clipped-wrap">
    <p class="clipped">ExplorAR</p>
</div>
<div id="inksplatter" onClick="imageEnlarge('inksplatter','image',0,'Sinister Comfort')" style="z-index: 6; top: 180px;">
    <div class="splat" style="background: url(portfolio/inksplatter-min.png); background-size: cover;"></div>
</div>
<div id="abuse" onClick="imageEnlarge('abuse','video',1,'Abuse (Addixtion 2021)')" style="z-index: 6; top: 270px; animation-delay: 0.8s;">
    <div class="splat" style="background: url(portfolio/abuse-min.gif); background-size: cover; animation-delay: 0.8s;"></div>
</div>
<div id="alone" onClick="imageEnlarge('alone','video',2,'Alone (Addixtion 2021)')" style="z-index: 6; top: 400px; animation-delay: 0.4s;">
    <div class="splat" style="background: url(portfolio/alone-min.gif); background-size: cover;  animation-delay: 0.4s;"></div>
</div>
<div id="barf" onClick="imageEnlarge('barf','video',3,'BARF2FEELBETTER (Addixtion 2021)')" style="z-index: 6; top: 520px; animation-delay: 1.2s">
    <div class="splat" style="background: url(portfolio/barf-min.gif); background-size: cover;  animation-delay: 1.2s"></div>
</div>
<div id="happy" onClick="imageEnlarge('happy','video',4,'Happys Pills (Addixtion 2021)')" style="z-index: 6; top: 650px; animation-delay: 0.8s">
    <div class="splat" style="background: url(portfolio/happy-min.gif); background-size: cover;  animation-delay: 0.8s"></div>
</div>
<div id="identity" onClick="imageEnlarge('identity','video',5,'Identity (Addixtion 2021)')" style="z-index: 6; top: 780px; animation-delay: 1.2s">
    <div class="splat" style="background: url(portfolio/identity-min.gif); background-size: cover;  animation-delay: 1.6s"></div>
</div>
<div id="lost" onClick="imageEnlarge('thea','image',6,'Lost')" style="z-index: 6; top: 910px; animation-delay: 1.6s">
    <div class="splat" style="background: url(portfolio/thea-min.png); background-size: cover;  animation-delay: 1.2s"></div>
</div>
<div id="death" onClick="imageEnlarge('Death','image',7,'Death, Disease, and Pestillence')" style="z-index: 6; top: 1050px; animation-delay: 2s">
    <div class="splat" style="background: url(portfolio/Death-min.png); background-size: cover; animation-delay: 2s"></div>
</div>
<img id="BG" src="mobileElement.png" style="position: absolute; margin:0px; top: -140px;">
<a href="/blog.html" class="externalLinks" style="position: absolute; top: 1250px; left: 32%;">Blog</a>
<a href="/videoGames.html" class="externalLinks" style="position: absolute; top: 1350px; left: 22%;">V.Games</a>
<a href="/WIP.html" class="externalLinks" style="position: absolute; top: 1450px; left: 32%;">WIP</a>
</body>
<script src="mobile.js"></script>
</html>

（对齐的重要信息在顶部，您可以忽略该功能的触发器，它只会在所有图像加载后触发。这是我尝试解决加载问题的尝试，但它不起作用）

    var img = document.querySelector('img')

function loaded() {
  document.getElementById('BG').style.left = (window.innerWidth/2 - document.getElementById('BG').width/2) + "px";
var BGbox = document.getElementById('BG').getBoundingClientRect();
document.getElementById('inksplatter').style.left = BGbox.left + 190 + "px";
document.getElementById('abuse').style.left = BGbox.left + 45 + "px";
document.getElementById('alone').style.left = BGbox.left + 170 + "px";
document.getElementById('barf').style.left = BGbox.left + 50 + "px";
document.getElementById('happy').style.left = BGbox.left + 190 + "px";
document.getElementById('identity').style.left = BGbox.left + 50 + "px";
document.getElementById('lost').style.left = BGbox.left + 190 + "px";
document.getElementById('death').style.left = BGbox.left + 60 + "px";
}

if (img.complete) {
  loaded()
} else {
  img.addEventListener('load', loaded)
  img.addEventListener('error', function() {
      alert('error')
  })
}

function resized() {
    document.getElementById('BG').style.left = (window.innerWidth/2 - document.getElementById('BG').width/2) + "px";
    var BGbox = document.getElementById('BG').getBoundingClientRect();
    document.getElementById('inksplatter').style.left = BGbox.left + 190 + "px";
    document.getElementById('abuse').style.left = BGbox.left + 45 + "px";
    document.getElementById('alone').style.left = BGbox.left + 170 + "px";
    document.getElementById('barf').style.left = BGbox.left + 50 + "px";
    document.getElementById('happy').style.left = BGbox.left + 190 + "px";
    document.getElementById('identity').style.left = BGbox.left + 50 + "px";
    document.getElementById('lost').style.left = BGbox.left + 190 + "px";
    document.getElementById('death').style.left = BGbox.left + 60 + "px";
};

var descArray = ["Inspired by 'The Laughing Man, Ghost In The Shell' but remixed with grunge and glitch art elements; I am a huge fan of sinister smiles",
                 "Abuse has an addictive property that most people do not mention. When two adults engage in an abusive relationship, both the abuser and abused must get something out of the relationship in order for the abuse to continue. It is heaven and hell, full of highs and lows. It can provide relief from emptinesses caused early in life. There is a certain comfort in an abusive relathionship if it is all you have known.",
                 "The mind is not meant for isolation, but many of us have afflictions that make it difficult to socialize. This turbulent cycle of wanting to isolate, but hurting as a result of it is very similar to (and often the cause of) hard drug addictions. This is a cycle that gets worse with time.",
                 "When you come out of a bender the withdrawal can hit hard. Intense vomiting and nausea are the first signs of what you truly have done to yourself. The second signs are the knowledge of what horrible things you have done. You can look down into your vomit reflection and see yourself transformed into a demon.",
                 "Making happiness the only acceptable emotion to feel can be the fuel to continually chase different highs. Never allowing yourself to feel the pain of the past, present, or future does not allow you to heal and process what issues truly ail you. The need to avoid pain will lead to sedation when happiness is no longer a choice, and eventually a loss of self.",
                 "Hiding your true identity and putting on masks to appeal to others can be extremely comforting. It is what we learn to do very early on as children to avoid being bullied. It takes introspection and lots of time to truly find who you are and be comfortable with it. The dissonance between who you are and how you represent yourself can lead to years of shame and embarrassment, causing all sort of self-harm and self-hatred. This can then lead to even more discomfort with being genuine.",
                 "A woman, obscured by the overwhelming distractions of the world.",
                 "I beleive that all good things come from bad, so I like to visually show this by making terrible, scary, or morbid things 'cute.' Here three of The Four Horsemen of The Apocalypse are depicted reflecting this ideal."];

function imageEnlarge(name,type,number,realName){
    var newDom = document.createElement('div');
    newDom.id = "imageWrapper";
    newDom.style.top = window.visualViewport.pageTop + "px";
    document.body.prepend(newDom);
    
    var newDom = document.createElement('div');
    newDom.id = "blackground";
    document.getElementById('imageWrapper').append(newDom);
    
    var newDom = document.createElement('img');
    newDom.id = "x";
    newDom.src = "X.png"
    document.getElementById('imageWrapper').append(newDom);
    
    if (type == 'image'){
        var newDom = document.createElement('img');
        newDom.id = "bigImage";
        newDom.src = "portfolio/"+name+".png";
        document.getElementById('imageWrapper').append(newDom);
    } else {
        var newDom = document.createElement('video');
        newDom.id = "bigImage";
        newDom.loop = "true";
        newDom.autoplay = "true";
        newDom.muted = "true";
        newDom.src = "portfolio/"+name+".mp4";
        document.getElementById('imageWrapper').append(newDom);
    }
    var newDom = document.createElement('br');
    document.getElementById('imageWrapper').append(newDom);
    
    var newDom = document.createElement('br');
    document.getElementById('imageWrapper').append(newDom);
    
    var newDom = document.createElement('paragraph');
    newDom.id = "imageTitle";
    newDom.innerHTML = realName;
    document.getElementById('imageWrapper').append(newDom);
    
    var newDom = document.createElement('br');
    document.getElementById('imageWrapper').append(newDom);
    
    var newDom = document.createElement('br');
    document.getElementById('imageWrapper').append(newDom);
    
    var newDom = document.createElement('paragraph');
    newDom.id = "imageDesc";
    newDom.innerHTML = descArray[number];
    document.getElementById('imageWrapper').append(newDom);
    
    document.addEventListener('scroll', event => {
        document.getElementById('imageWrapper').style.top = window.visualViewport.pageTop + "px";
    })
    
    document.getElementById('x').addEventListener("click", event => {
        document.getElementById('imageWrapper').remove();
    });
}

提前感谢您的帮助和时间！

标签： javascripthtmlcss

javascript - 为什么我的网站在移动设备上左对齐

问题描述

解决方案

推荐阅读