javascript - 如何使我的网站对移动设备友好-似乎无法通过@media 查询来解决

Question

我像往常一样尝试使用媒体查询，但我不知道我做错了什么。这是它在桌面上的样子：[桌面] ： https ://i.stack.imgur.com/rIQbK.png 这是它在手机上的样子：[手机]：https://i.stack.imgur。 com/Y0JLP.jpg . 当我注释掉 .css 文件时，边距消失。我真的不知道在这里使用哪些@media 查询。我希望它与桌面相同。尝试更改位置并手动调整边距。但没有什么好用的，先在这里发帖。一整天都在网上找不到答案，希望你能帮忙！提前谢谢你..（它在视频的顶部）

// function([string1, string2],target id,[color1,color2])    
consoleText(['נשבר לכם המסך?', 'הטלפון נפל למים?', 'הטלפון אינו נטען?'], 'text', ['white', 'red', 'black']);

function consoleText(words, id, colors) {
    if (colors === undefined) colors = ['#fff'];
    var visible = true;
    var con = document.getElementById('console');
    var letterCount = 1;
    var x = 1;
    var waiting = false;
    var target = document.getElementById(id)
    target.setAttribute('style', 'color:' + colors[0])
    window.setInterval(function () {

        if (letterCount === 0 && waiting === false) {
            waiting = true;
            target.innerHTML = words[0].substring(0, letterCount)
            window.setTimeout(function () {
                var usedColor = colors.shift();
                colors.push(usedColor);
                var usedWord = words.shift();
                words.push(usedWord);
                x = 1;
                target.setAttribute('style', 'color:' + colors[0])
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (letterCount === words[0].length + 1 && waiting === false) {
            waiting = true;
            window.setTimeout(function () {
                x = -1;
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (waiting === false) {
            target.innerHTML = words[0].substring(0, letterCount)
            letterCount += x;
        }
    }, 120)
    window.setInterval(function () {
        if (visible === true) {
            con.className = 'console-underscore hidden'
            visible = false;

        } else {
            con.className = 'console-underscore'

            visible = true;
        }
    }, 400)
}

#myVideo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  #myVideo video {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
  }
  .console-container {
   font-size:4em;
    text-align:center;
    height:200px;
    width:600px;
     display:block;
     position:absolute;
    color:white;
     top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
      text-shadow: 
      2px 2px #ffffff,
      4px 4px #000000;
   }

    <section class="banner embed-responsive-item">
        <video autoplay muted loop id="myVideo">
            <source src="https://mobilefixexperts.com/wp-content/uploads/2018/01/mobile-repair-experts-video.mp4"
                type="video/mp4">
        </video>
        <div style='direction: rtl;' class='console-container float-end'><span id='text'></span>
            <div class='console-underscore' id='console'>&#95;</div>
        </div>
        <a id="a" class="btn btn-primary btn-lg float-end" href="#" role="button">צור קשר</a>
        <!-- <h2 class="float-end display-1" style='direction: rtl;'>מה תרצו לתקן היום?</h2>
        <a id="a" class="btn btn-primary btn-lg float-end" href="#" role="button">צור קשר</a> -->
    </section>

CSS代码是：

.console-container {
   font-size:4em;
    text-align:center;
    height:200px;
    width:600px;
     display:block;
     position:absolute;
    color:white;
     top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
      text-shadow: 
      2px 2px #ffffff,
      4px 4px #000000;
   }

标签： javascripthtmlcssmobile

Answer 1

这是我也遇到过的常见问题。这样做的是大文本，当大文本触摸屏幕右侧时，您可能会看到网站开始混乱。所以，解决这个问题的解决方案是让文本响应意味着它不应该接触它应该变小的一侧，所以你可以这样做：

@media screen and (max-width: 425px) { //Note where it starts happening
   #text {
         font-size: 3em; //small than what it was before
   }
}