Page is shrinking on mobile devices

geiger · January 15, 2015, 1:49pm

I’m having a strange problem. When I view this page on my computer and resize my browser to a low width, it is responsive (Attachment 1). However, when I view it on my iPhone, the page is shrunk (Attachment 2). Why might this be happening? Thank you.

[code]

CompareWear.com

<div id="bar">
</div>

<div id="header">
</div>

<div id="container-outer">
	<div id="container-page">
					<div id="main">

<div class="category">
	<div class="category-heading">
		Compare <strong>Smartwatches</strong>
	</div>

	<ul class="products" id="Smartwatches">

				
			<li>
				<input type="checkbox" name="vs" value="watch" id="watch">
				<label for="watch">
					<img src="/images/compare-watch.jpg" alt="watch">
					<div>
						<span class="brand">Apple</span>
						<span class="product">Watch</span>
						<span class="price">from $349</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="peak" id="peak">
				<label for="peak">
					<img src="/images/compare-peak.jpg" alt="peak">
					<div>
						<span class="brand">Basis</span>
						<span class="product">Peak</span>
						<span class="price">$199.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="surge" id="surge">
				<label for="surge">
					<img src="/images/compare-surge.jpg" alt="surge">
					<div>
						<span class="brand">Fitbit</span>
						<span class="product">Surge</span>
						<span class="price">$249.95</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="vivoactive" id="vivoactive">
				<label for="vivoactive">
					<img src="/images/compare-vivoactive.jpg" alt="vivoactive">
					<div>
						<span class="brand">Garmin</span>
						<span class="product">V&iacute;voactive</span>
						<span class="price">$249.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="gWatch" id="gWatch">
				<label for="gWatch">
					<img src="/images/compare-gWatch.jpg" alt="gWatch">
					<div>
						<span class="brand">LG</span>
						<span class="product">G&nbsp;Watch</span>
						<span class="price">$229.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="gWatchR" id="gWatchR">
				<label for="gWatchR">
					<img src="/images/compare-gWatchR.jpg" alt="gWatchR">
					<div>
						<span class="brand">LG</span>
						<span class="product">G&nbsp;Watch&nbsp;R</span>
						<span class="price">$299.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="moto360" id="moto360">
				<label for="moto360">
					<img src="/images/compare-moto360.jpg" alt="moto360">
					<div>
						<span class="brand">Motorola</span>
						<span class="product">Moto&nbsp;360</span>
						<span class="price">from $249.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="pebble" id="pebble">
				<label for="pebble">
					<img src="/images/compare-pebble.jpg" alt="pebble">
					<div>
						<span class="brand">Pebble</span>
						<span class="product">Smartwatch</span>
						<span class="price">$99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="pebbleSteel" id="pebbleSteel">
				<label for="pebbleSteel">
					<img src="/images/compare-pebbleSteel.jpg" alt="pebbleSteel">
					<div>
						<span class="brand">Pebble</span>
						<span class="product">Steel</span>
						<span class="price">$199</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="gear2" id="gear2">
				<label for="gear2">
					<img src="/images/compare-gear2.jpg" alt="gear2">
					<div>
						<span class="brand">Samsung</span>
						<span class="product">Gear&nbsp;2</span>
						<span class="price">$299.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="gearLive" id="gearLive">
				<label for="gearLive">
					<img src="/images/compare-gearLive.jpg" alt="gearLive">
					<div>
						<span class="brand">Samsung</span>
						<span class="product">Gear&nbsp;Live</span>
						<span class="price">$199.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="gearS" id="gearS">
				<label for="gearS">
					<img src="/images/compare-gearS.jpg" alt="gearS">
					<div>
						<span class="brand">Samsung</span>
						<span class="product">Gear&nbsp;S</span>
						<span class="price">from $349.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="smartwatch" id="smartwatch">
				<label for="smartwatch">
					<img src="/images/compare-smartwatch.jpg" alt="smartwatch">
					<div>
						<span class="brand">Sony</span>
						<span class="product">Smartwatch&nbsp;3</span>
						<span class="price">from $249.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="activite" id="activite">
				<label for="activite">
					<img src="/images/compare-activite.jpg" alt="activite">
					<div>
						<span class="brand">Withings</span>
						<span class="product">Activit&eacute;</span>
						<span class="price">$450</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="activitePop" id="activitePop">
				<label for="activitePop">
					<img src="/images/compare-activitePop.jpg" alt="activitePop">
					<div>
						<span class="brand">Withings</span>
						<span class="product">Activit&eacute;&nbsp;Pop</span>
						<span class="price">$149.95</span>
					</div>
				</label>
			</li> 
	</ul>
	
	<div class="submit-compare"><label for="submit-compare" class="sB small blue round bold upper">Compare selections &nbsp;<i class="fa fa-arrow-circle-right"></i></label></div>
</div>

	
<div class="category">
	<div class="category-heading">
		Compare <strong>Fitness Bands</strong>
	</div>

	<ul class="products" id="FitnessBands">

				
			<li>
				<input type="checkbox" name="vs" value="charge" id="charge">
				<label for="charge">
					<img src="/images/compare-charge.jpg" alt="charge">
					<div>
						<span class="brand">Fitbit</span>
						<span class="product">Charge</span>
						<span class="price">$129.95</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="chargeHR" id="chargeHR">
				<label for="chargeHR">
					<img src="/images/compare-chargeHR.jpg" alt="chargeHR">
					<div>
						<span class="brand">Fitbit</span>
						<span class="product">Charge&nbsp;HR</span>
						<span class="price">$149.95</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="flex" id="flex">
				<label for="flex">
					<img src="/images/compare-flex.jpg" alt="flex">
					<div>
						<span class="brand">Fitbit</span>
						<span class="product">Flex</span>
						<span class="price">$99.95</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="vivofit" id="vivofit">
				<label for="vivofit">
					<img src="/images/compare-vivofit.jpg" alt="vivofit">
					<div>
						<span class="brand">Garmin</span>
						<span class="product">V&iacute;vofit&nbsp;2</span>
						<span class="price">$129.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="vivosmart" id="vivosmart">
				<label for="vivosmart">
					<img src="/images/compare-vivosmart.jpg" alt="vivosmart">
					<div>
						<span class="brand">Garmin</span>
						<span class="product">V&iacute;vosmart</span>
						<span class="price">$169.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="up24" id="up24">
				<label for="up24">
					<img src="/images/compare-up24.jpg" alt="up24">
					<div>
						<span class="brand">Jawbone</span>
						<span class="product">UP24</span>
						<span class="price">$129.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="up3" id="up3">
				<label for="up3">
					<img src="/images/compare-up3.jpg" alt="up3">
					<div>
						<span class="brand">Jawbone</span>
						<span class="product">UP3</span>
						<span class="price">$179.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="band" id="band">
				<label for="band">
					<img src="/images/compare-band.jpg" alt="band">
					<div>
						<span class="brand">Microsoft</span>
						<span class="product">Band</span>
						<span class="price">$199.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="gearFit" id="gearFit">
				<label for="gearFit">
					<img src="/images/compare-gearFit.jpg" alt="gearFit">
					<div>
						<span class="brand">Samsung</span>
						<span class="product">Gear&nbsp;Fit</span>
						<span class="price">$149.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="smartband" id="smartband">
				<label for="smartband">
					<img src="/images/compare-smartband.jpg" alt="smartband">
					<div>
						<span class="brand">Sony</span>
						<span class="product">SmartBand</span>
						<span class="price">$99.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="smartbandTalk" id="smartbandTalk">
				<label for="smartbandTalk">
					<img src="/images/compare-smartbandTalk.jpg" alt="smartbandTalk">
					<div>
						<span class="brand">Sony</span>
						<span class="product">SmartBand&nbsp;Talk</span>
						<span class="price">$169.99</span>
					</div>
				</label>
			</li> 
	</ul>
	
	<div class="submit-compare"><label for="submit-compare" class="sB small blue round bold upper">Compare selections &nbsp;<i class="fa fa-arrow-circle-right"></i></label></div>
</div>

	
<div class="category">
	<div class="category-heading">
		Compare <strong>Other Activity Trackers</strong>
	</div>

	<ul class="products" id="OtherActivityTrackers">

				
			<li>
				<input type="checkbox" name="vs" value="one" id="one">
				<label for="one">
					<img src="/images/compare-one.jpg" alt="one">
					<div>
						<span class="brand">Fitbit</span>
						<span class="product">One</span>
						<span class="price">$99.95</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="zip" id="zip">
				<label for="zip">
					<img src="/images/compare-zip.jpg" alt="zip">
					<div>
						<span class="brand">Fitbit</span>
						<span class="product">Zip</span>
						<span class="price">$59.95</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="upMove" id="upMove">
				<label for="upMove">
					<img src="/images/compare-upMove.jpg" alt="upMove">
					<div>
						<span class="brand">Jawbone</span>
						<span class="product">UP&nbsp;Move</span>
						<span class="price">from $49.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="flash" id="flash">
				<label for="flash">
					<img src="/images/compare-flash.jpg" alt="flash">
					<div>
						<span class="brand">Misfit</span>
						<span class="product">Flash</span>
						<span class="price">from $49.99</span>
					</div>
				</label>
			</li> 			
			<li>
				<input type="checkbox" name="vs" value="shine" id="shine">
				<label for="shine">
					<img src="/images/compare-shine.jpg" alt="shine">
					<div>
						<span class="brand">Misfit</span>
						<span class="product">Shine</span>
						<span class="price">from $99.99</span>
					</div>
				</label>
			</li> 
	</ul>
	
	<div class="submit-compare"><label for="submit-compare" class="sB small blue round bold upper">Compare selections &nbsp;<i class="fa fa-arrow-circle-right"></i></label></div>
</div>

		</div>			
	</div>
</div>

<div id="footer">
</div>

[/code] [code]html { margin: 0; padding: 0; font-size: 62.5%; } body { margin: 0; padding: 0; font-family: 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', sans-serif; color: #222; } #bar { background-color: #444; height: 40px; border-bottom: 1px solid #222; } #header { border-bottom: 2px solid #CCC; background-color: #EEE; height: 100px; } #container-outer { text-align: center; margin: 0; padding: 0 20px; } form { margin: 0; padding: 0; } #submit-compare { display: none; } #container-page { margin: 0 auto; padding: 50px 0; max-width: 960px; text-align: left; overflow: auto; } #main { padding: 0; margin: 0; } /* #sidebar { padding: 0; margin: 0; } @media screen and (min-width: 640px) { #main { margin: 0 320px 0 0; } #sidebar { width: 310px; margin: 0 0 0 10px; float: right; } } */ .section { border-top: 2px solid #222; margin: 0 0 20px 0; } .section-heading { margin: 5px 0; } #footer { border-top: 2px solid #CCC; background-color: #EEE; height: 200px; }[/code]

RyanReese · January 15, 2015, 1:50pm

You don’t have hte meta viewport snippet. Without this piece of code, mobile devices and tablets and everything will attempt to view your regular-sized page, but shrunk down (zoomed out.)

Add this in the <head> section and you should see it fixed.

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

system · April 16, 2015, 9:04pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.