I'm asking this because I can't afford more than one computer to test my app at the time. And since it is under development, I can't afford to test on online tools either.

Thank you,

ralphm
—
2013-07-18T05:11:14Z —
#2

You can have as many @media rules applying simultaneously as you like. But those two you posted are mutually exclusive. The viewport width is either in the 0–320px range, the 768–1024px range, or neither. But it can't be both at once.

ketting00
—
2013-07-18T05:52:34Z —
#3

Thank you, but I don't quite understand this.Do you mean when user view it on the iPad, the old class width would be 500px and the new class width would be 600px.And they will not get a class width of 250px and 300px respectively.

It works great for one screen, but I've have no idea how to apply to many @media screen.Thank you

ralphm
—
2013-07-18T06:25:39Z —
#4

I may be missing something obvious, but I'm not sure what you are trying to do here. What is the purpose of the JS?

Do you mean when user view it on the iPad, the old class width would be 500px and the new class width would be 600px.And they will not get a class width of 250px and 300px respectively.

On an iPad, the second set of styles will automatically apply, and on an iPhone the first set of styles will apply. You dont't have to do anything to make that happen. The browser applies whatever styles match the screen width of the device.

OK, this seems more like a JS issue, so I've moved this thread to the JS forum.

Pullo
—
2013-07-18T09:07:18Z —
#8

Hi,

I'm a bit confused what the actual question here is.@ketting00 ;, could you reiterate what you are trying to achieve?

ketting00
—
2013-07-18T11:30:24Z —
#9

Well, I want to render image (still and motion) on a canvas. the best way you can do is setting attributes like this one:

<canvas id=c width=500 height=250></canvas>

If you set the width and the height with css like this:

#c {
width: 500px;
height: 250px;
}

And when you render image with javascript like this:

ctx.drawImage(image, 0, 0, 500, 250);

The image you render would be distorted, because, in this case, javascript 500px does not equal to css 500px like in an example on stackoverflow thread above.So, it is not the ideal for responsive design.

However, I'm able to solve this with the getCssProperty function above. Now that javascript width is equal to css width.The image is rendered in a proper scale.

Now that I have no idea which block of css styling code my getCssProperty function is pulling form. It could be either form [@media only screen and (max-width : 320px)] block or from [@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)] block. This is just a few.

So, this is the question I'm trying to solve.Hope I make myself clear.

Pullo
—
2013-07-18T11:41:51Z —
#10

ketting00 said:

The image you render would be distorted, because, in this case, javascript 500px does not equal to css 500px like in an example on stackoverflow thread above.So, it is not the ideal for responsive design.

Yup. With you.

ketting00 said:

However, I'm able to solve this with the getCssProperty function above. Now that javascript width is equal to css width.The image is rendered in a proper scale.

Ok.

ketting00 said:

Now that I have no idea which block of css styling code my getCssProperty function is pulling form. It could be either form [@media only screen and (max-width : 320px)] block or from [@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)] block. This is just a few.

So, this is the question I'm trying to solve.Hope I make myself clear.

So, are you asking how the browsers evaluate and apply media queries, so that you can determine where the width of your canvas element is being set?

ketting00
—
2013-07-18T11:47:22Z —
#11

Exactly! Thank you.

Pullo
—
2013-07-18T11:57:56Z —
#12

Well, to answer that, as far as I know, the rules are applied in the order they are matched.

In real life, I switching back and forth between video playlists and still images to display on one canvas. So there is no need to refresh page.

PS. I only has one computer. I'm not able to test on different screens.

Pullo
—
2013-07-18T14:22:21Z —
#14

Hi,

ketting00 said:

PS. I only has one computer. I'm not able to test on different screens.

I'll have a look at this later.In the meantime you might want to check out the Chrome extension I linked to before.It allows you to view multiple screen resolutions on one page

Pullo
—
2013-07-18T17:58:36Z —
#15

Hi,

I just tested this and for me it works as expected.I had to change min-device-width and max-device-width into min-width and max-width, so that I could test on my desktop, but the canvas gets resized at the correct points.

It's worth noting that when I resized the view port from small to large, the video became quite pixelated, but this has nothing to do with how the mdeia queries are applied.

Pullo
—
2013-07-18T19:27:15Z —
#16

Also, as noted in this thread, it is a bad idea to use CSS to resize your canvas (as it causes this blurry look).