CODEWITHSUNDEEP
jquerycssmobileresponsive-design
Giuseppe
Giuseppe

Reputation: 597

Adaptive mobile design works in small desktop window, but doesn't on mobile device

I have developed a mobile layout for my site http://www.latinaperstrada.it/

All I did is prepare a specific css for smaller screen and use jQuery to apply the right css. I'm using just two layouts, with a width threshold at 940 pixels

function adjustStyle(width) {
  styleSheet = "";
  width = parseInt(width);
  if (width < 940) {
    styleSheet = http_base_url + "/css/style-size-small.css";
  } else {
    styleSheet = http_base_url + "/css/style-size-normal.css";
  }
  //check the current value of the linked css.
  //size-stylesheet is the id I gave to the <link> tag
  if( $("#size-stylesheet").attr("href").lastIndexOf(styleSheet, 0) !== 0){
    $("#size-stylesheet").attr("href", styleSheet);
  }
}

$(window).load(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
    adjustStyle($(this).width());
  });
});

Everything is looking fine on desktops. I change the size of the window and the layout adapts.

I have then tested the layout on various environments.
Samsung Galaxy S II , default browser : it works
Same device as above, Firefox : not working (I'm getting a tiny unreadable desktop version, even if the resolution of the screen is lower than my threshold)
An older Iphone, don't know which exactly but low res for sure: not working, still tiny desktop version

I'm obviously missing something but I don't know what.

Upvotes: 1

Views: 156

Answers (1)

valerio0999
valerio0999

Reputation: 12136

the viewport tag in the head section is missing. add this:

<!-- viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />

Upvotes: 3

Related Questions