And I access them with this JavaScript function to allow user change classes on the fly:
function getCssProperty(elmId, property){
var elem = document.getElementById(elmId);
return window.getComputedStyle(elem,null).getPropertyValue(property);
}
// get css class value
var width = getCssProperty("my-div", "width");
var height = getCssProperty("my-div", "height");
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.
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.
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.
Here’s the code I change class when user tap on a screen:
var oldClass = function() {
var width = getCssProperty("my-div", "width");
var height = getCssProperty("my-div", "height");
}
oldClass();
var newClass = function() {
document.getElementById('my-div').className = 'new_feature';
var width = getCssProperty("my-div", "width");
var height = getCssProperty("my-div", "height");
}
It works great for one screen, but I’ve have no idea how to apply to many @media screen.
Thank you
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 don
t’t have to do anything to make that happen. The browser applies whatever styles match the screen width of the device.
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.
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
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.
Yeah, but your JavaScript is referencing whatever styles are currently being applied by the browser.
function getCssProperty(elmId, property){
var elem = document.getElementById(elmId);
return window.getComputedStyle(elem,null).getPropertyValue(property);
}
This code is media query agnostic.
When you do this:
var width = getCssProperty("canvas", "width");
it will return return the final used value of the CSS width property of your canvas element.