JS/HTML 键盘在移动设备上的 Safari 中被切断

发布于 2025-01-16 05:33:07 字数 3520 浏览 2 评论 0原文

我正在学习 wordle 克隆教程，当尝试托管我的修改版本时，键盘在移动设备上被切断，我无法找到一种方法来始终将整个键盘保持在屏幕上，或者能够滚动查看键盘被切断的部分。图像以及我的 css 和 div 创建如下。

style.css

h1 {
 text-align: center;
}

p {
 text-align: center;
}

img {
    float: center;
    width:  150px;
    height: 150px;
    object-fit: scale-down;
}

#game-board {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.letter-box {
  border: 2px solid gray;
  border-radius: 3px;
  margin: 2px;
  font-size: 2.5rem;
  font-weight: 700;
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.filled-box {
  border: 2px solid black;
}

.letter-row {
  display: flex;

}

#keyboard-cont-cont {
  width: 100vw;
  overflow: visible;
}

#keyboard-cont {
  margin: 1rem 0;
  left: 50%;
  top: 50%;
  padding: 0px 0px;
  display: flex;
  overflow: auto;
  flex-direction: column;
  align-items: center;
}

#keyboard-cont div {
  display: flex;
  overflow: auto;

}

.center {
  width: 50%;
}

.second-row {
  margin: 0.5rem 0;
}

.keyboard-button {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem;
  margin: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
}

键盘创建

<div id="game-board">

</div>
<div id="keyboard-cont-cont">
  <div id="keyboard-cont">
      <div class="first-row">
          <button class="keyboard-button">q</button>
          <button class="keyboard-button">w</button>
          <button class="keyboard-button">e</button>
          <button class="keyboard-button">r</button>
          <button class="keyboard-button">t</button>
          <button class="keyboard-button">y</button>
          <button class="keyboard-button">u</button>
          <button class="keyboard-button">i</button>
          <button class="keyboard-button">o</button>
          <button class="keyboard-button">p</button>
      </div>
      <div class="second-row">
          <button class="keyboard-button">a</button>
          <button class="keyboard-button">s</button>
          <button class="keyboard-button">d</button>
          <button class="keyboard-button">f</button>
          <button class="keyboard-button">g</button>
          <button class="keyboard-button">h</button>
          <button class="keyboard-button">j</button>
          <button class="keyboard-button">k</button>
          <button class="keyboard-button">l</button>
      </div>
      <div class="third-row">
          <button class="keyboard-button">Del</button>
          <button class="keyboard-button">z</button>
          <button class="keyboard-button">x</button>
          <button class="keyboard-button">c</button>
          <button class="keyboard-button">v</button>
          <button class="keyboard-button">b</button>
          <button class="keyboard-button">n</button>
          <button class="keyboard-button">m</button>
          <button class="keyboard-button">Enter</button>
      </div>
  </div>
</div>

原文

I'm working through a wordle clone tutorial, and when trying to host my modified version the keyboard is getting cut off on mobile, and I can't figure out a way to either keep the entire keyboard on the screen at all times, or be able to scroll over to see the cut off part of the keyboard. Images and my css and div creation are below.

style.css

h1 {
 text-align: center;
}

p {
 text-align: center;
}

img {
    float: center;
    width:  150px;
    height: 150px;
    object-fit: scale-down;
}

#game-board {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.letter-box {
  border: 2px solid gray;
  border-radius: 3px;
  margin: 2px;
  font-size: 2.5rem;
  font-weight: 700;
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.filled-box {
  border: 2px solid black;
}

.letter-row {
  display: flex;

}

#keyboard-cont-cont {
  width: 100vw;
  overflow: visible;
}

#keyboard-cont {
  margin: 1rem 0;
  left: 50%;
  top: 50%;
  padding: 0px 0px;
  display: flex;
  overflow: auto;
  flex-direction: column;
  align-items: center;
}

#keyboard-cont div {
  display: flex;
  overflow: auto;

}

.center {
  width: 50%;
}

.second-row {
  margin: 0.5rem 0;
}

.keyboard-button {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem;
  margin: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
}

Keyboard Creation

<div id="game-board">

</div>
<div id="keyboard-cont-cont">
  <div id="keyboard-cont">
      <div class="first-row">
          <button class="keyboard-button">q</button>
          <button class="keyboard-button">w</button>
          <button class="keyboard-button">e</button>
          <button class="keyboard-button">r</button>
          <button class="keyboard-button">t</button>
          <button class="keyboard-button">y</button>
          <button class="keyboard-button">u</button>
          <button class="keyboard-button">i</button>
          <button class="keyboard-button">o</button>
          <button class="keyboard-button">p</button>
      </div>
      <div class="second-row">
          <button class="keyboard-button">a</button>
          <button class="keyboard-button">s</button>
          <button class="keyboard-button">d</button>
          <button class="keyboard-button">f</button>
          <button class="keyboard-button">g</button>
          <button class="keyboard-button">h</button>
          <button class="keyboard-button">j</button>
          <button class="keyboard-button">k</button>
          <button class="keyboard-button">l</button>
      </div>
      <div class="third-row">
          <button class="keyboard-button">Del</button>
          <button class="keyboard-button">z</button>
          <button class="keyboard-button">x</button>
          <button class="keyboard-button">c</button>
          <button class="keyboard-button">v</button>
          <button class="keyboard-button">b</button>
          <button class="keyboard-button">n</button>
          <button class="keyboard-button">m</button>
          <button class="keyboard-button">Enter</button>
      </div>
  </div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

メ斷腸人バ 2025-01-23 05:33:07

该代码使用混合单位（px、rem、vw）来调整键盘大小。

对于许多视口来说这是可以的，因为一行键的总和仍然小于宽度。然而，对于较窄的设备，总数可能会更大，因此位会在边缘被切断。

确保行保持在视口宽度内的一种方法是使用 vw 单位来调整字体和周围填充的大小。

就字符而言，最宽的一行是底部的一行。此代码段根据定义为 100vw 的分数的单位“--e”来确定事物的大小。

这只是一个初步演示，您可能还想查看边距。如果键盘在某些设备上似乎变得太大，您可以使用 CSS 来选择较小的单位（例如使用 min 函数或媒体查询）。

<htmL>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1 {
      text-align: center;
    }
    
    p {
      text-align: center;
    }
    
    img {
      float: center;
      width: 150px;
      height: 150px;
      object-fit: scale-down;
    }
    
    #game-board {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    
    .letter-box {
      border: 2px solid gray;
      border-radius: 3px;
      margin: 2px;
      font-size: 1rem;
      font-weight: 700;
      height: 3rem;
      width: 3rem;
      width: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
    }
    
    .filled-box {
      border: 2px solid black;
    }
    
    .letter-row {
      display: flex;
    }
    
    #keyboard-cont-cont {
      width: 100vw;
      overflow: visible;
    }
    
    #keyboard-cont {
      margin: 1rem 0;
      left: 50%;
      top: 50%;
      padding: 0px 0px;
      display: flex;
      overflow: auto;
      flex-direction: column;
      align-items: center;
      background: pink;
      font-family: monospace;
      --e: calc(100vw / 35);
    }
    
    #keyboard-cont div {
      display: flex;
      overflow: auto;
    }
    
    .center {
      width: 50%;
    }
    
    .second-row {
      margin: 0.5rem 0;
      margin: calc(var(--e) / 2);
    }
    
    .keyboard-button {
      font-size: var(--e);
      font-weight: 700;
      padding: calc(var(--e) / 2);
      margin: 0 2px;
      cursor: pointer;
      text-transform: uppercase;
    }
  </style>
</head>

<body>
  <div id="game-board">

  </div>
  <div id="keyboard-cont-cont">
    <div id="keyboard-cont">
      <div class="first-row">
        <button class="keyboard-button">q</button>
        <button class="keyboard-button">w</button>
        <button class="keyboard-button">e</button>
        <button class="keyboard-button">r</button>
        <button class="keyboard-button">t</button>
        <button class="keyboard-button">y</button>
        <button class="keyboard-button">u</button>
        <button class="keyboard-button">i</button>
        <button class="keyboard-button">o</button>
        <button class="keyboard-button">p</button>
      </div>
      <div class="second-row">
        <button class="keyboard-button">a</button>
        <button class="keyboard-button">s</button>
        <button class="keyboard-button">d</button>
        <button class="keyboard-button">f</button>
        <button class="keyboard-button">g</button>
        <button class="keyboard-button">h</button>
        <button class="keyboard-button">j</button>
        <button class="keyboard-button">k</button>
        <button class="keyboard-button">l</button>
      </div>
      <div class="third-row">
        <button class="keyboard-button">Del</button>
        <button class="keyboard-button">z</button>
        <button class="keyboard-button">x</button>
        <button class="keyboard-button">c</button>
        <button class="keyboard-button">v</button>
        <button class="keyboard-button">b</button>
        <button class="keyboard-button">n</button>
        <button class="keyboard-button">m</button>
        <button class="keyboard-button">Enter</button>
      </div>
    </div>
  </div>
</body>

</html>

The code is using a mixture of units (px, rem, vw) to size the keyboard.

For many viewports this will be OK because the sum total of a row of keys will still be less than the width. However, for narrower devices the total may be greater, hence bits get cut off at the edges.

One way of making sure the rows stay within the viewport width is to use vw units to size the font and the surrounding padding.

The widest row in terms of characters is the bottom one. This snippet sizes things in relation to a unit '--e' defined as a fraction of 100vw.

This is just a preliminary demo, you may want also to look at margins. And if the keyboard seems to be getting too big on some devices you could use CSS to select a smaller unit instead (e.g. using min function or media queries).

<htmL>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1 {
      text-align: center;
    }
    
    p {
      text-align: center;
    }
    
    img {
      float: center;
      width: 150px;
      height: 150px;
      object-fit: scale-down;
    }
    
    #game-board {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    
    .letter-box {
      border: 2px solid gray;
      border-radius: 3px;
      margin: 2px;
      font-size: 1rem;
      font-weight: 700;
      height: 3rem;
      width: 3rem;
      width: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
    }
    
    .filled-box {
      border: 2px solid black;
    }
    
    .letter-row {
      display: flex;
    }
    
    #keyboard-cont-cont {
      width: 100vw;
      overflow: visible;
    }
    
    #keyboard-cont {
      margin: 1rem 0;
      left: 50%;
      top: 50%;
      padding: 0px 0px;
      display: flex;
      overflow: auto;
      flex-direction: column;
      align-items: center;
      background: pink;
      font-family: monospace;
      --e: calc(100vw / 35);
    }
    
    #keyboard-cont div {
      display: flex;
      overflow: auto;
    }
    
    .center {
      width: 50%;
    }
    
    .second-row {
      margin: 0.5rem 0;
      margin: calc(var(--e) / 2);
    }
    
    .keyboard-button {
      font-size: var(--e);
      font-weight: 700;
      padding: calc(var(--e) / 2);
      margin: 0 2px;
      cursor: pointer;
      text-transform: uppercase;
    }
  </style>
</head>

<body>
  <div id="game-board">

  </div>
  <div id="keyboard-cont-cont">
    <div id="keyboard-cont">
      <div class="first-row">
        <button class="keyboard-button">q</button>
        <button class="keyboard-button">w</button>
        <button class="keyboard-button">e</button>
        <button class="keyboard-button">r</button>
        <button class="keyboard-button">t</button>
        <button class="keyboard-button">y</button>
        <button class="keyboard-button">u</button>
        <button class="keyboard-button">i</button>
        <button class="keyboard-button">o</button>
        <button class="keyboard-button">p</button>
      </div>
      <div class="second-row">
        <button class="keyboard-button">a</button>
        <button class="keyboard-button">s</button>
        <button class="keyboard-button">d</button>
        <button class="keyboard-button">f</button>
        <button class="keyboard-button">g</button>
        <button class="keyboard-button">h</button>
        <button class="keyboard-button">j</button>
        <button class="keyboard-button">k</button>
        <button class="keyboard-button">l</button>
      </div>
      <div class="third-row">
        <button class="keyboard-button">Del</button>
        <button class="keyboard-button">z</button>
        <button class="keyboard-button">x</button>
        <button class="keyboard-button">c</button>
        <button class="keyboard-button">v</button>
        <button class="keyboard-button">b</button>
        <button class="keyboard-button">n</button>
        <button class="keyboard-button">m</button>
        <button class="keyboard-button">Enter</button>
      </div>
    </div>
  </div>
</body>

</html>

回复收藏 0 原文

~没有更多了~