user1883050 user1883050 - 25 days ago 6
CSS Question

Does Responsive work differently in mobile?

Just for experimental purposes, I configured the following

media query
:

@media only screen and (max-width: 600px) {
.fontresize { font-size: 3em; }
}


<table style="width: 100%;" border="0">
<tbody>
<tr>

<td width="50%"><a href="food.html" class="fontresize">Food</a></td>
<td width="50%"><a href="candles.html" class="fontresize">Candles</a></td>

</tr>
</tbody>
</table>


This works fine on desktop Chrome when I shrink the width of the Chrome browser window.

However, it doesn't work in the following 2 circumstances:


  1. When I load the page to my server and open it on the Chrome browser in my iPhone 4S in portrait mode.

  2. When I right click the page in Chrome and choose "Inspect", and then choose "Toggle Device" (from Dev Tools) and choose any of the various phone portrait modes. This despite the fact that all the phone modes are under 600px in width.



What gives?

Answer

This works fine on desktop Chrome when I shrink the width of the Chrome browser window.

However, it doesn't work in the following 2 circumstances:

When I load the page to my server and open it on the Chrome browser in my iPhone 4S in portrait mode.

When you have a symptom like this, the first thing you want to check is that you have a viewport meta tag in the head of your document

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....  
</head>  

more info: http://www.w3schools.com/css/css_rwd_viewport.asp

Good luck