Media Queries Working on Mobile But Not on Browser Resize
Question
I'm using the following code at the top of my document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<link href="<?php bloginfo('template_url'); ?>/css/960-12-15-15-fluid.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_url'); ?>/css/gsfest.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_url'); ?>/css/gsfest-tablet-portrait.css" rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" />
<!--<link href="<?php bloginfo('template_url'); ?>/css/gsfest-smartphone-landscape.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" />-->
<link href="<?php bloginfo('template_url'); ?>/css/gsfest-smartphone-portrait.css" rel="stylesheet" type="text/css" media="screen and (max-width: 320px)" />
</head>
The responsive CSS loads fine when browsing with a mobile device and also with the Responsive Design View in FF, but when I simply try to resize the browser in FF or Chrome it sticks with the desktop layout.
Does anyone know why? I'm using the same code that I always use and haven't had this problem in the past, unless there's something I've forgot to include
1 answers
solution1
1 2014-08-17 16:31:55
It's difficult to tell the full story from what you've posted, but you could start by tweaking your viewport meta tag to
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
Also, remember that the standard cascading rules still apply, so if you have a rule set in your first two stylesheets (960-12-15-15-fluid.css and gsfest.css), that would apply at different viewports if it had higher specificity .
Good luck
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.