0

It's the first time for me when I make a responsive design of website. I have a problem with smartphones.

I am using following meta-tag for make website "zoomed in" load. (i followed https://stackoverflow.com/a/12785631/1716195 )

<meta name="viewport" content="width=device-width; minimum-scale=0.5; initial-scale=0.5; maximum-scale=0.5; user-scalable=yes;" />

I also tried 

<meta name="viewport" content="width=320; minimum-scale=0.5; initial-scale=0.5; maximum-scale=0.5; user-scalable=no;" />

and 

<meta name="viewport" content="width=320; minimum-scale=0.5; initial-scale=0.5; maximum-scale=0.5; user-scalable=no;" />

It works fine for me on Samsung Galaxy S - ICS, default browser. But if same page is loaded with HTC Desire HD Android 2.3.5 default browser, it loads page as zoomed out.

Same problem I have, when I load same page on my SGS, using a Mobile Opera

I really don't know, where the problem could be. Do you have any advice what to focus on?

So I decided problem must somewhere in browser or viewstate. I 'll be glad for any advice

Community
  • 1
  • 1
wohral
  • 85
  • 2
  • 9

1 Answers1

0

Cross Browser Testing in mobile phone usually limited by browser capability. I also felt the problem too.

my advice is keep initial scale by 1.0, and adjust the size by media query. At my experience, it not cover all device but it helps.

you might see reference for viewport support

Fendy Kusuma
  • 672
  • 7
  • 16
  • Thanks for your time and help. I finally found solution right in initial-scale, as you posted. – wohral Feb 06 '13 at 13:30
  • Thanks for your time and help. I finally found solution right in initial-scale, as you posted. For me was helpful. I set my initial-scale to 1.0 as u advice to me. But as u wrote, its not cover for all devices. I fixed the problem but other problems appears. – wohral Feb 06 '13 at 13:35