I have an HTML5 page using CSS3 and SVG graphics in development. I tried using media queries to enlarge the SVG graphics when the device pixel ratio is 1.5 or 2. This works fine. Now I view my page on a small device like the Motorolla Xoom. The reported ratio is 1. This means the Xoom displays everything quite small as compared to a regular monitor. The most annoying part is that it looks great in landscape mode, but in portrait mode the full page is resized to fit in the same width. The ratio number does not change at this point.
I did try using something like 'width: 3in;' but again, it was only the correct size in landscape.
Ultimately, I'd like to use some ratio of device size vs pixel size, and scale everything this way. Is this possible?
My issue was that my graphics were never rendered again when orientation was changed. When I hit refresh again, all is coming up as expected. This was an issue that existed somewhere between my keyboard and my chair. The media queries are in fact working, I just need to rerender some stuff upon orientation change.
Related
Screen Size unchanged on Mobile
Briefly explaining this, I have a Chat App that works well on a desktop view but when we go into mobile it seems that the device simply mimics the size of the desktop screen (ie: on my Oneplus 6 the <html> tag is around 4000x2000px). I'm quite new to HTML mobile scaling so forgive me if the wording for this isn't to par with what's expected.
Continuing, on my desktop if I manually change Chrome's window size my webpage scales perfectly while on my mobile device it's huge as said in the previous line. Would using the #media tag in css help specifically for this? If so, how?
One last thing, if I zoom in manually on my mobile it obviously looks perfect as it's meant to fit the new tall aspect ratios. Which is ultimately what I wish to do, just need to keep the website scaled perfectly like on the second picture (picture B).Image B
In chrome inspect it gives you the option to set/change the resolution and the pixel ratio. I have set a profile for pixel ratio of 1, and set a profile for ratio of 2 and 3 etc. But when i toggle between each profile...nothing changes..
Any idea why?
Even when i changed the setting to Responsive, and toggle between their settings for 1,2,3...nothing happens at all.
Thanks
I suspect that the device pixel ratio emulation feature is independent from the resolution. So you will only see a change if the page you're looking at uses the device pixel ratio, either by using min-devicepixel-ratio in CSS or by accessing window.devicePixelRatio.
For example, if you view this demo with iPhone 6 Plus emulation enabled you'll see this:
Evaluating window.devicePixelRatio in the console will return 3.
Most of the time the device pixel ratio is used to determine whether it's worth downloading a large version of an image at twice the normal resolution.
That means that even when a site does respond to the pixel ratio you won't necessarily see the difference very clearly. But if you check the network panel you'll see that instead of downloading image.png image#2x.png was downloaded.
I am creating a responsive game web site. for that i don't want scroll bar in any resolution. i am using to test my website mozila "Responsive design View". in that they provided some standard screen resolution. I am OK with all resolution except 1280x600, And now my quesion is ...
1. Is there any devices in this resolution?
2. How many people are using this type of devices?
3. is it necessary to consider this resolution while creating responsive website?
Please replay me. Thanks in advance.
When it comes to desktop computers, screen resolution means nothing because a user can change the size of his browser window to any width and height. This means you may have a "resolution" of "1280x600 pixels" one moment, and "1281x599 pixels" the next.
Responsive design should gracefully accommodate all browser window sizes. All you need to worry is break points (i.e. your media queries), where page layout changes. Most designers typically set 2-3 break points to match the most commonly used screen sizes.
I've never heard of that exact ratio, 1280x600 pixels.
Here are some quick statistical resources:
https://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
http://www.w3schools.com/browsers/browsers_display.asp
http://gs.statcounter.com/#resolution-na-monthly-200903-201203
We're using a scaling technique to improve the resolution of our canvas web apps on the retina display. Basically, the technique described here:
http://zsprawl.com/iOS/2012/03/html5-canvas-and-retina-displays/
However, we've noticed a SIGNIFICANT performance difference when running in landscape mode vs portrait mode. I've set up a jsFiddle test app to demonstrate this. You can notice the difference if you view the embedded version:
http://jsfiddle.net/SaJ69/embedded/result/
(removing the /embedded/result/ will take you to the original fiddle. I could only have a post with 2 links in it)
If you switch between portrait and landscape when viewing this on an iPad3 (you'll need to refresh the browser window between switches) you can see that portrait mode is choppier than landscape. When running this on my own webserver (not through jsFiddle), the results are much more noticeable.
I tried to do some frame rate metrics, but they're only measuring the number of times we make draw calls, not the number of times the browser will actually update.
Anyone have any insight into this? Is this a hardware related issue? We are theoretically doing the same draw calls and filling the same number of pixels right?
-Chris
It seems one working fix is to clamp the canvas width to 1023, so that the double density canvas is 2046 px wide; discovered by Arima & explained here:
http://www.scirra.com/forum/retina-ios-performance-problem-fix-please-test_topic58742.html
I ran into the same issue with landscape vs. portrait as well. This also happens on iPhone 4, 4s, and 5 - Anywhere Retina and double density canvas is involved. The only work around I have is to simply not use the double density trick until Apple fixes the issue.
But, if you were determined to use Retina, you could detect the orientation of the device and resize the canvas for double density only in landscape...
I recently put together a website exclusively using a computer with a wide screen monitor. Later, When opening the same pages online using a computer with a smaller sized monitor, I suddenly noticed that all the div positions are completely out of place. My question is how to use the widescreen monitor to continue to develop my webpages without messing up div positions for views on regular sized monitors?
Re replies:
Thanks for the advice guys. I agree that the design of the page should be flexible enough to accommodate most browser window sizes. However, when u are working with a widescreen monitor and not paying attention it is easy to overcompensate div placements and element sizes. My next question is on how to be sure of regular browser window dimensions and how to force my browser window into that size?
Thanks Cyrena for giving me directions with the development tools. I do use them and check across browsers. But My problem here was working exclusively on a widescreen monitor with the browser maximized. I don't want to make the same mistake, so I need to figure out how to resize my browser window with the right dimensions.
Two basic approaches off the top of my head:
Resize your browser to be the width of your minumum supported desktop/browser size.
Set desktop preferences to be different sizes (like profiles) and switch between them during testing phase.
The truth is that a really good looking site will never work on all browser configurations. Choose a bar and work against that.
Don't maximize your browser window? Just shrink it horizontally a bit?
But any website that has such a high dependence on the shape of your display is poorly designed. It should fit to any size display that's bigger than some minimum (no use spending extra effort to make it fit on a 100x100 pixel screen)
If you use IE's Developer Tools, you can resize the window to see what it would look like at different resolutions.
Check it out in:
Tools > Developer Tools > Tools menu > Resize.
You will also want to make sure you are testing your website on other browser / OS combinations at the very least.