CODEWITHSUNDEEP
htmlcssresponsive-designscreenmedia-queries
Faizan
Faizan

Reputation: 776

Responsive design not working well for smaller divices

just Designed a responsive website (www.atdrive.com) its working very fine in screens have larger resolutions, but.. it is not working in for small devices which have smaller resolution
Like smartphones and phablets they have smaller screens but larger resolutions.. for better definition hava look at few screenshots taken from different emulator devices

Samsung Galaxy tab 2 || working fine

enter image description here

Samsung Galaxy Note 2 || working fine enter image description here

Iphone|| Not working fine

enter image description here

Same

enter image description here

Samsung Galaxy S|| working fine enter image description here

As you can see website shifted towards left, and i'm not getting any clue how to fix it, i have tried applying viewport but it not worked and my css are: 

@media only screen and (min-width: 480px) and (max-width: 619px)
@media only screen and (min-width: 320px) and (max-width: 479px)
@media only screen and (min-width: 250px) and (max-width: 319px)
@media only screen and (max-width: 249px)

So please suggest something to fix it or if you had walk-through any similar issue visit atdrive

Upvotes: 0

Views: 148

Answers (3)

Anup
Anup

Reputation: 9738

Iphone is zooming your web page by default.

Add this code :-

<meta name="viewport" content="width=device-width" />

Upvotes: 1

Jignesh Kheni
Jignesh Kheni

Reputation: 1302

try this meta tag put this meta tag insteade of your viewport meta tag 

<meta name="viewport" content="width=1170, user-scalable=no">

in this meta tag put "width = your website width"

Upvotes: 0

Amila Thennakoon
Amila Thennakoon

Reputation: 417

Try to use This chrome extension with chrome developer tools

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

Upvotes: 0

Related Questions