html - レスポンシブデザインが正しく機能しない

Question

特定のページにレスポンシブデザインを使用するタスクがありますが、適切に機能していません。ドロップダウンリストの場合、デザインがサポートされていません。私のhtmlページは

<style type="text/css"> 
.body
{
width:100%;
}  
#wrapper
{
    width:100%;
}
#container
{
    width:100%;
}
    #frmEnergyEfficiency
    {
        width:100%;
        height:900px;       
        margin:0px auto;        
    }
    .leftalign
    {
      text-align:left;
      padding-left:2px;
    }
    .rightalign
    {
     float:right;   
     padding-right:2px;
    }
    .alignment
    {
     float:right;   
     padding-right:0px;
    }
    .divTable{
  display:table;         
  width:790px;                 
  border-spacing:5px;
}
.divRow{
  display:table-row;
  width:790px;
  clear:both;
}
.divCell{
  float:left;
  display:table-column;         
  width:155px;        
}
.divAlign
{
   text-align:left;
   width:400px;
}

.divAlign1
{
    text-align:left;
   width:670px;
}
.align
{
    width:150px;
}
</style>
<link rel="stylesheet" media="only screen and (max-width:724px)" href="ipad.css">
<link rel="stylesheet" media="only screen and (max-width:424px)" href="ipad1.css">
</head>
<body>
<div id="wrapper">
<div id="container">
<h3><center>Energy Efficiency</center></h3><br />
<form id="frmEnergyEfficiency" method="post" action="EnergyEfficiency">
<h4><center>EE loan overview</center></h4>
<div class="divAlign">
<div>
    <label class="leftalign">Country</label>
    <select name="ddlCountry"id="ddlCountry"class="rightalign"style="width:150px;">
             <option>Select Country</option>
            <option value="INDIA">INDIA</option>
            <option value="AMERICA">AMERICA</option>
            <option value="CHINA">CHINA</option>
            <option value="RUSSIA">RUSSIA</option>
            <option value="PAKISTHAN">PAKISTHAN</option>
            <option value="SINGAPORE">SINGAPORE</option>
            <option value="GERMANY">GERMANY</option>
            <option value="MEXICO">MEXICO</option>
            <option value="ITALY">ITALY</option>
    </select>
</div><br />
<div>
    <label class="leftalign">City (or nearby city)</label>
    <select name="ddlCity"id="ddlCity" class="rightalign"style="width:150px;">
            <option value="Select">Select City</option>
            <option value="NEW YORK">NEW YORK</option>
            <option value="BANGALORE">BANGALORE</option>
            <option value="MEXICO CITY">MEXICO CITY</option>
            <option value="LONDON">LONDON</option>
            <option value="HYDERABAD">HYDERABAD</option>
            <option value="HONG KONG">HONG KONG</option>
            <option value="LAHORE">LAHORE</option>
            <option value="LOS ANGLES">LOS ANGLES</option>          
    </select>
</div><br />


<div>
    <label class="leftalign">Industry sector of borrower</label>
   <input type="text" name="txtIndustrySector"id="txtIndustrySector"class="rightalign"/>
</div><br />


<div>
    <label class="leftalign">EE component of loan</label>
   <input type="text" name="txtEEComponent"id="txtEEComponent"class="rightalign"/>
</div><br />


<div>
   <label class="leftalign">Total project cost</label>
   <input type="text" name="txtProjectCost"id="txtProjectCost"class="rightalign"/>
</div><br />

<div>
    <label class="leftalign">Tenor of financing</label>
   <input type="text" name="txtTenorFinancing"id="txtTenorFinancing"class="rightalign"/>
</div><br />

</div>
<div class="divAlign1">
<h4><center>Technical data</center></h4>
<div>
    <label class="leftalign">Is the EE loan for process or non-process?</label><span>*</span>
   <span class="alignment">
        <input type="radio" name="radEESold" value="Non-Process"/>Non-Process
        <input type="radio" name="radEESold" value="Process"/>Process
   </span>
</div><br />


<div>
    <label class="leftalign">Pre-loan equipment/project description(e.g. coal fired boiler,efficiency 66%)</label><span>*</span>
   <input type="text" name="txtPreLoanEquipment"id="txtPreLoanEquipment"class="rightalign"/>
</div><br />
<div>
    <label class="leftalign">Post-loan equipment/project description(e.g. gas boiler,efficiency 78%)</label><span>*</span>
   <input type="text" name="txtPostLoanEquipment"id="txtPostLoanEquipment"class="rightalign"/>
</div><br />

</div>
<div class="divTable">
             <div class="divRow">
                <div class="divCell"><b>Form of Energy</b><span>*</span></div>
                <div  class="divCell"><b>Current pre-loan consumption</b><span>*</span></div>
                <div  class="divCell"><b>Units</b><span>*</span></div>
                <div  class="divCell"><b>Expected post-loan consumption</b><span>*</span></div>
                <div  class="divCell"><b>Units</b></div>
             </div>


            <div class="divRow">
                <div class="divCell">Electricity</div>                
                <div class="divCell"><input type="text" name="txtPreLoanElectricity"id="txtPreLoanElectricity"/></div>
                <div class="divCell">
                    <select name="ddlElectricityUnits"id="ddlElectricityUnits"class="rightalign"style="width:150px;">             
                        <option value="kWh/yr">kWh/yr</option>
                        <option value="MWh/yr">MWh/yr</option>                                  
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanElectricity"id="txtPostLoanElectricity"/></div>
                <div class="divCell"><label id="txtElectricityUnitss"></label></div>
            </div>  


            <div class="divRow">
                <div class="divCell">Heat</div>                       
                <div class="divCell"><input type="text" name="txtPreLoanHeat"id="txtPreLoanHeat"/></div>
               <div class="divCell">
                    <select name="ddlHeatUnits"id="ddlHeatUnits"class="rightalign selection" style="width:150px;">             
                        <option value="btu/yr">btu/yr</option>
                        <option value="GJ/yr">GJ/yr</option>
                        <option value="kcal/yr">kcal/yr</option>                                    
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanHeat"id="txtPostLoanHeat"/></div>
                <div class="divCell"><label id="txtHeatUnitss"></label></div>
            </div> 


             <div class="divRow">
               <div class="divCell">Natural Gas</div>                                    
                <div class="divCell"><input type="text" name="txtPreLoanNaturalGas"id="txtPreLoanNaturalGas"/></div>
                <div class="divCell">
                    <select name="ddlNaturalGasUnits"id="ddlNaturalGasUnits"class="rightalign"style="width:150px;">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                  
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanNaturalGas"id="txtPostLoanNaturalGas"/></div>
                <div class="divCell"><label id="txtNaturalGasUnitss"></label></div>
            </div> 


             <div class="divRow">
                <div class="divCell">Crude Oil</div>                           
                <div class="divCell"><input type="text" name="txtPreLoanCrudeOil"id="txtPreLoanCrudeOil"/></div>
                <div class="divCell">
                    <select name="ddlCrudeOilUnits"id="ddlCrudeOilUnits"class="rightalign"style="width:150px;">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanCrudeOil"id="txtPostLoanCrudeOil"/></div>
                <div class="divCell"><label id="txtCrudeOilyUnitss"></label></div>
            </div>   


            <div class="divRow">
                <div class="divCell">Gasoline</div>                                            
                <div class="divCell"><input type="text" name="txtPreLoanGasoline"id="txtPreLoanGasoline"/></div>
               <div class="divCell">
                    <select name="ddlGasolineUnits"id="ddlGasolineUnits"class="rightalign"style="width:150px;">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanGasoline"id="txtPostLoanGasoline"/></div>
                <div class="divCell"><label id="txtGasolineUnitss"></label></div>
            </div> 


            <div class="divRow">
                <div class="divCell">Diesel</div>                                       
                <div class="divCell"> <input type="text" name="txtPreLoanDiesel"id="txtPreLoanDiesel"/></div>
               <div class="divCell">
                    <select name="ddlDieselUnits"id="ddlDieselUnits"class="rightalign"style="width:150px;">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanDiesel"id="txtPostLoanDiesel"/></div>
                <div class="divCell"><label id="txtDieselUnitss"></label></div>
            </div> 


            <div class="divRow">
                <div class="divCell">Biodiesel</div>                                                           
                <div class="divCell"><input type="text" name="txtPreLoanBiodiesel"id="txtPreLoanBiodiesel"/></div>
                <div class="divCell">
                    <select name="ddlBiodieselUnits"id="ddlBiodieselUnits"class="rightalign"style="width:150px;">             
                        <option value="kg/yr">kg/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                                          
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanBiodiesel"id="txtPostLoanBiodiesel"/></div>
                <div class="divCell"><label id="txtBiodieselUnitss"></label></div>
            </div>   


            <div class="divRow">
                <div class="divCell">Coking Coal</div>                                           
                <div class="divCell"><input type="text" name="txtPreLoanCoakingCoal"id="txtPreLoanCoakingCoal"/></div>
                <div class="divCell">
                    <select name="ddlCokingCoalUnits"id="ddlCokingCoalUnits"class="rightalign"style="width:150px;">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                  
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanCoakingCoal"id="txtPostLoanCoakingCoal"/></div>
                <div class="divCell"><label id="txtCoakingCoalUnitss"></label></div>
            </div>   


            <div class="divRow">
                <div class="divCell">Compressed natural gas</div>                                                                      
                <div class="divCell"><input type="text" name="txtPreLoanCompressed"id="txtPreLoanCompressed"/></div>
                <div class="divCell">
                    <select name="ddlCompressedUnits"id="ddlCompressedUnits"class="rightalign"style="width:150px;">             
                        <option value="kg/yr">kg/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanCompressed"id="txtPostLoanCompressed"/></div>
                <div class="divCell"><label id="txtCompressedUnitss"></label></div>
            </div>  


            <div class="divRow">
                <div class="divCell">Liquified petroleum gas</div>                                                   
                <div class="divCell"><input type="text" name="txtPreLoanLiquifiedGas"id="txtPreLoanLiquifiedGas"/></div>
                <div class="divCell">
                    <select name="ddlLiquifiedGasUnits"id="ddlLiquifiedGasUnits"class="rightalign"style="width:150px;">             
                        <option value="kg/yr">kg/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanLiquifiedGasy"id="txtPostLoanLiquifiedGas"/></div>
                <div class="divCell"><label id="txtLiquifiedGasUnitss"></label></div>               
            </div>        
</div>
<div class="divTable">
             <div class="divRow">
                <div class="divCell"><b>Form of Energy</b><span>*</span></div>
                <div  class="divCell"><b>Current pre-loan consumption</b><span>*</span></div>
                <div  class="divCell"><b>Units</b><span>*</span></div>
                <div  class="divCell"><b>Expected post-loan consumption</b><span>*</span></div>
                <div  class="divCell"><b>Units</b></div>
             </div>


            <div class="divRow">
                <div class="divCell">Electricity</div>                
                <div class="divCell"><input type="text" name="txtPreLoanElectricity"id="txtPreLoanElectricity" class="respowidth"/></div>
                <div class="divCell">
                    <select name="ddlElectricityUnits"id="ddlElectricityUnits"class="rightalign align">             
                        <option value="kWh/yr">kWh/yr</option>
                        <option value="MWh/yr">MWh/yr</option>                                  
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanElectricity"id="txtPostLoanElectricity" class="respowidth"/></div>
                <div class="divCell"><label id="txtElectricityUnitss"></label></div>
            </div>  


            <div class="divRow">
                <div class="divCell">Heat</div>                       
                <div class="divCell"><input type="text" name="txtPreLoanHeat"id="txtPreLoanHeat" class="respowidth"/></div>
               <div class="divCell">
                    <select name="ddlHeatUnits"id="ddlHeatUnits"class="rightalign align">             
                        <option value="btu/yr">btu/yr</option>
                        <option value="GJ/yr">GJ/yr</option>
                        <option value="kcal/yr">kcal/yr</option>                                    
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanHeat"id="txtPostLoanHeat" class="respowidth"/></div>
                <div class="divCell"><label id="txtHeatUnitss"></label></div>
            </div> 


             <div class="divRow">
               <div class="divCell">Natural Gas</div>                                    
                <div class="divCell"><input type="text" name="txtPreLoanNaturalGas"id="txtPreLoanNaturalGas" class="respowidth"/></div>
                <div class="divCell">
                    <select name="ddlNaturalGasUnits"id="ddlNaturalGasUnits"class="rightalign align">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                  
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanNaturalGas"id="txtPostLoanNaturalGas" class="respowidth"/></div>
                <div class="divCell"><label id="txtNaturalGasUnitss"></label></div>
            </div> 


             <div class="divRow">
                <div class="divCell">Crude Oil</div>                           
                <div class="divCell"><input type="text" name="txtPreLoanCrudeOil"id="txtPreLoanCrudeOil" class="respowidth"/></div>
                <div class="divCell">
                    <select name="ddlCrudeOilUnits"id="ddlCrudeOilUnits"class="rightalign align">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanCrudeOil"id="txtPostLoanCrudeOil" class="respowidth"/></div>
                <div class="divCell"><label id="txtCrudeOilyUnitss"></label></div>
            </div>   


            <div class="divRow">
                <div class="divCell">Gasoline</div>                                            
                <div class="divCell"><input type="text" name="txtPreLoanGasoline"id="txtPreLoanGasoline" class="respowidth"/></div>
               <div class="divCell">
                    <select name="ddlGasolineUnits"id="ddlGasolineUnits"class="rightalign align">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanGasoline"id="txtPostLoanGasoline" class="respowidth"/></div>
                <div class="divCell"><label id="txtGasolineUnitss"></label></div>
            </div> 


            <div class="divRow">
                <div class="divCell">Diesel</div>                                       
                <div class="divCell"> <input type="text" name="txtPreLoanDiesel"id="txtPreLoanDiesel" class="respowidth"/></div>
               <div class="divCell">
                    <select name="ddlDieselUnits"id="ddlDieselUnits"class="rightalign align">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanDiesel"id="txtPostLoanDiesel" class="respowidth"/></div>
                <div class="divCell"><label id="txtDieselUnitss"></label></div>
            </div> 


            <div class="divRow">
                <div class="divCell">Biodiesel</div>                                                           
                <div class="divCell"><input type="text" name="txtPreLoanBiodiesel"id="txtPreLoanBiodiesel" class="respowidth"/></div>
                <div class="divCell">
                    <select name="ddlBiodieselUnits"id="ddlBiodieselUnits"class="rightalign align">             
                        <option value="kg/yr">kg/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                                          
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanBiodiesel"id="txtPostLoanBiodiesel" class="respowidth"/></div>
                <div class="divCell"><label id="txtBiodieselUnitss"></label></div>
            </div>   


            <div class="divRow">
                <div class="divCell">Coking Coal</div>                                           
                <div class="divCell"><input type="text" name="txtPreLoanCoakingCoal"id="txtPreLoanCoakingCoal" class="respowidth"/></div>
                <div class="divCell">
                    <select name="ddlCokingCoalUnits"id="ddlCokingCoalUnits"class="rightalign align">             
                        <option value="litre/yr">litre/yr</option>
                        <option value="m3/yr">m3/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                  
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanCoakingCoal"id="txtPostLoanCoakingCoal" class="respowidth"/></div>
                <div class="divCell"><label id="txtCoakingCoalUnitss"></label></div>
            </div>   


            <div class="divRow">
                <div class="divCell">Compressed natural gas</div>                                                                      
                <div class="divCell"><input type="text" name="txtPreLoanCompressed"id="txtPreLoanCompressed" class="respowidth"/></div>
                <div class="divCell">
                    <select name="ddlCompressedUnits"id="ddlCompressedUnits"class="rightalign align">             
                        <option value="kg/yr">kg/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanCompressed"id="txtPostLoanCompressed" class="respowidth"/></div>
                <div class="divCell"><label id="txtCompressedUnitss"></label></div>
            </div>  


            <div class="divRow">
                <div class="divCell">Liquified petroleum gas</div>                                                   
                <div class="divCell"><input type="text" name="txtPreLoanLiquifiedGas"id="txtPreLoanLiquifiedGas" class="respowidth"/></div>
                <div class="divCell">
                    <select name="ddlLiquifiedGasUnits"id="ddlLiquifiedGasUnits"class="rightalign align">             
                        <option value="kg/yr">kg/yr</option>
                        <option value="tonne/yr">tonne/yr</option>                                      
                    </select>
                </div>
                <div class="divCell"><input type="text" name="txtPostLoanLiquifiedGasy"id="txtPostLoanLiquifiedGas" class="respowidth"/></div>
                <div class="divCell"><label id="txtLiquifiedGasUnitss"></label></div>               
            </div>        
</div>


<div class="divAlign">
<h4><center>Production details</center></h4>
<div>
   <label class="leftalign">Production units<br />(e.g.Tonnes,Kg,m3,or widgets etc.)</label><span>*</span>
   <input type="text" name="txtProductionUnit"id="txtProductionUnit"class="rightalign"/>
</div><br />


<div>
    <label class="leftalign">Annual pre-loan production</label><span>*</span>
   <input type="text" name="txtAnnualPreProduction"id="txtAnnualPreProduction"class="rightalign"/>
</div><br />


<div>
    <label class="leftalign">Annual post-loan production</label><span>*</span>
   <input type="text" name="txtAnnualPostProduction"id="txtAnnualPostProduction"class="rightalign"/>
</div><br />
</div>



<div class="divAlign">
<h4><center>Eligibility results</center></h4>
<div>
    <label class="leftalign">Pre-loan specific energy use</label>
   <input type="text" name="txtPreSpecificEnergyUse"id="txtPreSpecificEnergyUse"class="rightalign"/>
</div><br />


<div>
    <label class="leftalign">Post-loan specific energy use</label>
   <input type="text" name="txtPostSpecificEnergyUse"id="txtPostSpecificEnergyUse"class="rightalign"/>
</div><br />


<div>
    <label class="leftalign"><b>Eligibility indicator</b></label>
   <input type="text" name="txtEligibilityIndicator"id="txtEligibilityIndicator"class="rightalign"/>
</div><br />


<div>
    <label class="leftalign"></label>
    <label class="alignment"><b>Project Eligible</b></label>
</div><br />


<div>
    <label class="leftalign"><b>Annual energy savings</b></label>
   <input type="text" name="txtAnnualEnergySavings"id="txtAnnualEnergySavings"class="rightalign"/>
</div><br />


<div>
    <label class="leftalign"><b>Enter optional EE loan details?</b></label>
   <span class="alignment">
        <input type="radio" name="radEELoanDetails" value="Yes"/>Yes
        <input type="radio" name="radEELoanDetails" value="No"/>No
   </span>
</div>

</div><br />

<div>
    <input type="button" id="btnSave" name="btnSave" value="Save" />
    <input type="button" id="btnValidate" name="btnValidate" value="Validate & Next" />
    <input type="button" id="btnSubmit" name="btnSubmit" value="Submit" />
</div>
</form>
</div>
</div>

私の ipad.css ファイルは

.body
{
width:100%;
}  
#wrapper
{
    width:100%;
}
#container
{
    width:100%;
}
    #frmEnergyEfficiency
    {
        width:100%;
        height:900px;       
        margin:0px auto;        
    }
    .leftalign
    {
      text-align:left;
      padding-left:2px;
    }

     .rightalign
    {
     float:right;   
     padding-right:2px;
    }
    .alignment
    {
    width:100%;
     float:right;   
     padding-right:0px;
    }
    .divTable{
  display:table;         
  width:790px;                 
  border-spacing:5px;
}
.divRow{
  display:table-row;
  width:790px;
  clear:both;
}
.divCell{
  float:left;
  display:table-column;         
  width:100%;        
}
.divAlign
{
   text-align:left;
   width:400px;
}

.divAlign1
{
    text-align:left;
   width:100%;
}
.align
{
    width:100px;
}

私の ipad1.css ファイルは

.body
{
width:100%;
}  
#wrapper
{
    width:100%;
}
#container
{
    width:100%;
}
    #frmEnergyEfficiency
    {
        width:100%;
        height:900px;       
        margin:0px auto;        
    }
    .leftalign
    {width:100%;
      text-align:left;
      padding-left:2px;
    }
    .rightalign
    {width:100%;
     float:right;   
     padding-right:2px;
    }
    .respowidth
    {
     width:100%;    
    }
    .alignment
    {width:100%;
     float:right;   
     padding-right:0px;
    }
    .divTable{
  display:table;                         
  border-spacing:5px;
}
.divRow{
  display:table-row;
  width:100%;
  clear:both;
}
.divCell{
  float:left;
  display:table-column;         
  width:100%;        
}
.divAlign
{
   text-align:left;
   width:100%;
}

.divAlign1
{
    text-align:left;
   width:100%;
}

score 3 · Accepted Answer

デザインでは必ず「px」の代わりに「%」を使用してください...つまり、要素内の 100% のコンテナーで、パディングまたはマージンがパーセンテージになることを意味します...

パーセンテージはあなたの仕事を素早く終わらせます...

また、ヘッダーにビューポートスクリプトを実装してみてください。

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

例えば、

.class1 {
    width:100%;
    float:right;
    padding-right:2px;
}
.class2 {
    width:600px;
}

のように書くことができます。

.class1 {
    width:99%;
    float:right;
    padding-right:1%;
}
.class2 {
    width:70%;
}

また、css リンケージを置き換えます。

<link rel="stylesheet" media="only screen and (max-width:724px)" href="ipad.css">
<link rel="stylesheet" media="only screen and (max-width:424px)" href="ipad1.css">

これに

<link href="ipad.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" /> //For Tablet
<link href="ipad1.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" /> //For mobile

入力ボックスの場合は、フォーム要素をフロートしてみてください。

例えば、

<div class="form-contain"><label>Name</label><div class="input-contain"><input type="text" /></div></div>

.form-contain { overflow:hidden; }
.form-contain label { width:30%; text-align:right; float:left; }
.form-contain .input-contain { width:70%; float:left; }
.form-contain .input-contain input { width:100%; }

モバイルの場合、幅を 100% に保ちます....

score 2 · Accepted Answer

HTMLページのheadセクションで使用されていました

このように

<head>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
</head>

html - レスポンシブ デザインが正しく機能しない

2 に答える 2

Related

Reference

html - レスポンシブデザインが正しく機能しない