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?
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