0

I have a responsive WP theme based on a Bootstrap ver2 css framework. Everything works on desktop: if test in different size (for different media queries) no problem. But if I'm testing on phone doesn't loads the media query. What could be the problem.

Link to the site: http://moldovan.szanto-zoltan.com/

p.s.: the header contains this to fit the device width

 <meta name="viewport" content="width=device-width, initial-scale=1">
Szántó Zoltán
  • 981
  • 1
  • 12
  • 26

1 Answers1

0

Via the documentation of Bootstrap 2

Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

How to enabling responsive features

Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

If you don't compiled Bootstrap from the Customize page, here is how to do it

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate file

.

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

for more information, read the documentation. I hope this solution will help you.

Suggestion

I think the best solution is to use bootstrap 3 it will work fine

Add those meta in your header page to tell the browser to disable the scaling. Then the CSS @media selectors are working as expected :

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

suggestion from this question

Community
  • 1
  • 1
dardar.moh
  • 5,987
  • 3
  • 24
  • 33
  • Hi, I think the best solution is to use bootstrap 3 it will work fine – dardar.moh Dec 28 '13 at 09:34
  • on desktop Firefox/Chrome works (even if i change the browser width to a mobile width) the problem comes when I'm looking the page in android browser (if I install Firefox on android works perfectly) or on iOS safari. any idea? – Szántó Zoltán Dec 28 '13 at 20:03
  • Still no luck, but now I noticed that in Safari doesn't works (not even desktop version, but on chrome & ff works great) – Szántó Zoltán Dec 28 '13 at 21:28
  • looks fine your website if you test it in [responsinator](http://www.responsinator.com/), so I think the problem is the Bootstrap 2 and browser's phone, I'm really sorry. Hope you find a solution – dardar.moh Dec 28 '13 at 22:21
  • I figured out something, if I change the container class to container-fluid it works, just the container isn't centered. I think this could be the problem – Szántó Zoltán Dec 29 '13 at 10:59
  • Great, look this [question](http://stackoverflow.com/questions/9184141/how-do-you-get-centered-content-using-twitter-bootstrap) – dardar.moh Dec 29 '13 at 20:40