0
私が作業しているコードがあります。私はフレックスコンテナを使用しているので、小さな画面サイズがすべてのフィールドをそれほど縮小させないようにする方法を理解できません。フレックスコンテナの選択ボックスが縮小しないようにするにはどうすればよいですか？
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>>
<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 == '') {this.value ='xx:xx:xx:xx:xx:xx';}" onfocus="if (this.value == 'xx:xx:xx:xx:xx:xx') {this.value = '';}">
<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の画面上でWebページの一部のスクリーンショットを添付。あなたの頭の中で使用
<meta name="viewport" content="width=device-width, initial-scale=1">
フレックスコンテナの初期設定は 'flex-shrink：1'です。つまり、フレックスアイテムは、デフォルトで縮小することができます。フレックスアイテムに 'flex-shrink：0'を適用することでこの機能を無効にすることができます。詳細はこちらhttp://stackoverflow.com/a/34355447/3597276 –
あなたのコメントを見てもこれを試しましたが、それでも動作しません。シミュレーションされた画面サイズではまだ縮小されます。 – brandontod97
実際にiPhoneの実際の画面でそれを表示していて、画面のサイズにはまったく調整されていません。デスクトップ解像度を使用しています。これを修正する方法はありますか？ – brandontod97