Question

我有一些我正在研究的代码。我正在使用一个弹性容器，我无法弄清楚如何防止较小的屏幕尺寸缩小我的所有字段。

var crsdesc; //var for new window
function popup(mylink) {
  if (!window.focus) return true;
  var href;
  if (typeof(mylink) == 'string')
    href = mylink;
  else
    href = mylink.href;
  crsdesc = window.open(href, 'crsdesc', 'width=420,scrollbars=yes');
  crsdesc.creator = self;
  return false;
}

function toggleMacAddressHint(element) {
  var wired = document.getElementById('wired');
  var wireless = document.getElementById('wireless');
  if (element.options[element.selectedIndex].value == "WIRED") {
    wireless.style.display = 'none';
    wired.style.display = 'block';
  } else if (element.options[element.selectedIndex].value == "WIRELESS") {
    wired.style.display = 'none';
    wireless.style.display = 'block';
  } else {
    wireless.style.display = 'none';
    wired.style.display = 'none';
  }
}

function DropDownChanged(theDropDown) {
  var theTextBox = theDropDown.form.elements["device_other"];
  if (theTextBox) {
    theTextBox.style.display = (theDropDown.value == "") ? "" : "none";
    if (theDropDown.value == "")
      theTextBox.focus();
  }
}

function checkvalue(theDropDown) {
  if (theDropDown.value === "others")
    document.getElementById('device_other').style.display = 'block';
  else
    document.getElementsByName('device_other').style.display = (theDropDown.value == "") ? "" : "none";
}

function showfield(name) {
  if (name == 'Other') document.getElementById('div1').innerHTML = '<input type="text" name="other" />';
  else document.getElementById('div1').innerHTML = '';
}

function FormSubmit(theForm) {
  var theDevice = theForm.elements["device"];
  var theDropDown = theForm.elements["device_select"];
  var theTextBox = theForm.elements["device_other"];
  if (theDevice && theDropDown && theTextBox)
    theDevice.value = (theDropDown.value == "") ? theTextBox.value : theDropDown.value;
}

body {
  font-family: Futura, arial, sans-serif;
}
.boxed {
  border: 3px solid #FDB913
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  text-align: center;
}
.flex-container > * {
  padding: 15px;
  -webkit-flex: 1 100%;
  flex: 1 100%;
}
.article {
  text-align: left;
}
header {
  background: #591f00;
  color: white;
}
footer {
  background: #591f00;
  color: white;
}
.nav {
  background: #eee;
}
.nav ul {
  list-style-type: none;
  padding: 0;
}
.nav ul a {
  text-decoration: none;
}
@media all and (min-width: 768px) {
  .nav {
    text-align: left;
    -webkit-flex: 1 auto;
    flex: 1 auto;
    -webkit-order: 1;
    order: 1;
  }
  .article {
    -webkit-flex: 5 0px;
    flex: 5 0px;
    -webkit-order: 2;
    order: 2;
  }
  footer {
    -webkit-order: 3;
    order: 3;
  }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>MY TITLE</title>
</head>
<body>
  <div class="flex-container">
    <header>
      <img src="./Assets/STACKED_WHITE.png" alt="logo" height="104" width="282"></img>
    </header>
    <article class="article">
      <h1>Device Registration</h1>
      <p>
        Register your game consoles or other devices on the Residential Network (ResNet).
        <br></br>
        <div class="boxed" style="padding: 10px ">
          <strong> You </strong> are responsible for the network activity of each and every device you register through ResNet. Please keep this in mind when you register devices.
        </div>
        <br></br>
        <div>
          Username: [this is a test name, input the actual code to make this work right]
        </div>
        <div>
          <div style="font-size:20px">Network type:</div>
          <select name="networkType" class="flex-container" onchange="toggleMacAddressHint(this);">
            <option value="none">Choose Network Type</option>&gt;
            <option value="none" disabled="">------------------------------</option>
            <option value="WIRED">Wired Network</option>
            <option value="WIRELESS">Wireless Network</option>
          </select>
        </div>
        <div>Mac address:
          <input type="text" name="mac" value="xx:xx:xx:xx:xx:xx" onblur="if (this.value == &#39;&#39;) {this.value =&#39;xx:xx:xx:xx:xx:xx&#39;;}" onfocus="if (this.value == &#39;xx:xx:xx:xx:xx:xx&#39;) {this.value = &#39;&#39;;}">
          <div id="wireless" style="display: none;">
            NOTE: Wireless MAC addresses may be called WLAN MAC Address.
          </div>
          <div id="wired" style="display: none;">
            NOTE: Wired MAC Addresses may be called LAN or Ethernet MAC Address
          </div>
        </div>
        <div>Device:
          <input type="hidden" name="device">
          <select name="device_select" onchange="showfield(this.options[this.selectedIndex].value)">
            <option value="none">Choose Device</option>
            <option value="none" disabled="">------------------------------</option>
            <option value="XBox_360">Xbox 360</option>
            <option value="XBox_One">Xbox One</option>
            <option value="Nintendo_Wii">Nintendo Wii</option>
            <option value="Nintendo_Wii_U">Nintendo Wii U</option>
            <option value="Nintendo_3DS">Nintendo 3DS</option>
            <option value="Playstation_3">PlayStation 3</option>
            <option value="Playstation_4">PlayStation 4</option>
            <option value="Playstation_Vita">PlayStation Vita</option>
            <option value="Streaming_Media_Device">Streaming Multimedia Device (Smart TVs, Apple TV, Nexus Q, Roku Streaming Box, etc.)</option>
            <option value="Other">Other</option>
          </select>
          <input type="text" name="device_other" style="display: none;">
          <div></div>
          <div id="div1" style="margin-left: 59px;"></div>
        </div>
      </p>
      <p><strong>*NOTE*</strong>: Screen mirroring and Air Play will not work on my wireless network</p>
    </article>
    <footer>Copyright © my house</footer>
  </div>
</body>
</html>

我还在模拟的iphone屏幕上附上了网页的一些截图。

Iphone simulated screen size

Answer 1

使用

<meta name="viewport" content="width=device-width, initial-scale=1">

在你的头脑中，缩放高密度显示器的内容。您可能需要再次调整您的网站，以免打破其他内容。

查看this link以了解有关视口的更多信息。

如何防止Flex容器中的选择框缩小？

1 个答案: