问题
I have been working on a fully responsive design which was going along great and tested properly on all the devices I could get my hands on... Until I viewed the project in the mobile version of Chrome on a Samsung Galaxy S4... It appears that the default media report is 1920x1080 which causes my layout to load the same way as if on my widescreen desktop. Granted, everything is still usable, but it is TINY. To solve this you need only make sure to use the viewport tag in the head of your document as follows... (I didn't have this before because everything was working fine without it)
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">
and in your CSS file use regular media query as follows...
@media screen and (max-device-width: 360px) { }
I may be off in my 360px measurement but it appears to be working and now everything is large on the S4 screen while adjusting accordingly... Can anyone add to this to make it more exact for this screen size? Thanks
回答1:
I have a Galaxy S4 and I feel like the device width it hits at is a little over 400px. Try changing your media query to:
@media screen and (max-width: 480px) { }
and see if it looks any better on your mobile phone. Also, this is the viewport I typically use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Hope it works out for you!
来源：https://stackoverflow.com/questions/24501270/samsung-galaxy-s4-responsive-design-media