The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

Dwayne Bensey: Jan 7, 2010

I'm trying to make my portfolio site responsive, particularly for my Galaxy S3 so I can show it to people at jobs fairs, etc. The problem is I can't seem to get my media queries to work properly across both the default Samsung browser and Chrome. Both of them give different values for device-width and device-height, so I've just been using width and dpi to adjust it for my phone.

Samsung browser:

Chrome:

(sorry for the large images)

I've tried the following:

code:

#container
{
	background-color: red;
	width: 50%;
	height: 50%;
}

@media screen and (max-width: 360px) and (-webkit-device-pixel-ratio: 2)
{ 
	#container
	{
		background-color: yellow;
		...
	}	
}

...but it still uses the color and dimensions from the first #container rule. Has anyone else had trouble with S3s? I've scoured Google and Stack Overflow, but none of the suggestions from other people seem to work

Am I missing something really obvious here?

edit: Never mind, it's working now!

In case anyone is interested:

code:

@media only screen and (max-device-width:720px) and (-webkit-min-device-pixel-ratio: 1.5)
{ 
	#container
	{
		background-color: yellow;
		...
	}	
}

Dwayne Bensey fucked around with this message at 22:44 on Oct 9, 2013

# ¿ Oct 9, 2013 20:05

Adbot: ADBOT LOVES YOU

# ¿ May 19, 2024 20:54

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread