Problems creating media queries for Samsung Galaxy S4

Navigation
1

I'm developing a responsive website and I set some CSS markups with media queries , but I still suffer from some devices, such as the Samsung Galaxy S4 . I believe it's because it contains a device-pixel-ratio equal to 3. I wanted to know how do I define media queries for this type of device.

Using Twitter Bootstrap the thing gets incredibly easy as it fits any device, including S4, which has a device-pixel-ratio "different". It turns out that the site is ready, refactoring is out of the question.

Are there any other devices that might give me a headache? Should I just add a different media query to the Samsung Galaxy S4 device, or is there any way to make my CSS look similar to Twitter Bootstrap ?

    
asked by anonymous 15.03.2014 / 18:48

1 answer

2

Refactoring is ideal, since adjusting your layout for specific devices is considered a bad practice.

Without more information about what kind of problems you encounter, I believe you should use specific media queries. According to this list , the CSS rules for S4 should appear in the following media query: 

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)

And note that this rule is still limited to WebKit browsers, by the presence of the prefixed property -webkit-device-pixel-ratio .

    
16.03.2014 / 15:42
Remount date with javascript Something wrong with references using two layers in the Entity