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

Question

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.我正在学习一个 wordle 克隆教程，当我尝试托管我的修改版本时，键盘在移动设备上被切断了，我想不出一种方法来始终将整个键盘保持在屏幕上，或者能够滚动查看键盘的截断部分。 Images and my css and div creation are below.图片和我的 css 和 div 创建如下。

style.css样式.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>

Answer 1

The code is using a mixture of units (px, rem, vw) to size the keyboard.该代码使用混合单位（px、rem、vw）来调整键盘大小。

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.确保行保持在视口宽度内的一种方法是使用 vw 单位来调整字体和周围填充的大小。

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.此代码段根据定义为 100vw 的分数的单位“--e”来调整大小。

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 (eg using min function or media queries).如果键盘在某些设备上似乎变得太大，您可以使用 CSS 到 select 一个较小的单位（例如使用最小 function 或媒体查询）。

 <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>

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

问题描述

1 个解决方案

解决方案1
1 2022-03-22 20:43:11

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

问题描述

1 个解决方案

解决方案1 1 2022-03-22 20:43:11

解决方案1
1 2022-03-22 20:43:11