Search code examples
htmlcssmobileresponsive-designadaptive-design

Adaptive layout mobile issues

I have 3 alternative layouts for different browser widths. Coded in CSS in my index.html like so:

<link rel='stylesheet' media='screen and (max-width: 640px)' href='narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 641px) and (max-width: 1200px)' href='med.css' />
<link rel='stylesheet' media='screen and (min-width: 1201px)' href='wide.css' />

It works perfectly on my desktop when I change the browser window size, and when I tested it in several responsive layout testing pages.
Problem: does not work on my mobile device (iphone 5), in any browser: it uses the wrong layout for the screen size. atm cannot test on other devices.
Any suggestions?

Solution

  • check meta tag in your HTML code it should be 

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

    then only it will be work on devices

    refer following link also

    https://css-tricks.com/snippets/html/responsive-meta-tag/