Needs review
Project:
Omega
Version:
7.x-3.x-dev
Component:
Code
Priority:
Normal
Category:
Feature request
Assigned:
Unassigned
Reporter:
Created:
7 Aug 2012 at 02:45 UTC
Updated:
27 Mar 2023 at 08:19 UTC
Jump to comment: Most recent, Most recent file
Comments
Comment #1
cellar door commentedI saw the tail end of this conversation in the IRC log from last night and figured I'd chime in. What you're referring to is the retina display on your new iPad if I'm not mistaken. Retina (for all the awesomeness that it is) can really create a nightmare for us web devs, here's why:
Retina does have double the resolution, but it has half the pixel width and height. This means that the devices pixels are now 25% of the original size. Luckily for us retina screens still use the standard width px for display width etc. in media queries. This makes it so we don't have to have 2 sets of media queries one for each style of screen. This doubled resolution isn't meant for displaying wider data though, it's meant for more data in the same space. It makes images resolute much clearer, text rounding clearer making it more readable. It's not meant to be a 1200px wide monitor though. Trying to do so would mean your site (including the text and images) would be rendered at 25% the size they currently are and basically render your site unusable IMHO.
So to answer your question yes a viewport setting like what you're wanting is a feature request but to be honest I'm not even sure it's possible as the viewport's purpose is to be larger than the screen is allowing for zooming. Seeing as it would make sites render at a smaller resolution it's not very applicable to the sites built on Omega. Unless someone else can show me a use-case I'm not sure we'd build this feature out.
Comment #2
bunthorne commentedIs it something that could be tested easily enough? It seems to be already built and in need of value changes. I'm talking about a typical use case of keeping initial value at 1.0, but allowing zoom out to 0.5 at the user's option. Why would we restrict a user from exploring the site at high resolution? Isn't that the point of zooming on touch screens?
FYI when I pinch the edges of this page screen in half on my new iPad, it is still legible.
Comment #3
cellar door commentedI think what you're trying to do is alter the media query to allow high pixel density displays to show the larger sizes. You can technically add the pixel density (either in resolution or in pixel density ratio) to the media query to force the user to see higher resolution versions of the site... a good explanation is here: https://developer.mozilla.org/en-US/docs/CSS/Media_queries . Altering the viewport size won't affect the media queries (just go to any responsive site in chrome and zoom in/out which changes the viewport size). For the most part viewports were made to render larger sites so they can be zoomed in on, not the other way around.
Zooming on touch screens is meant to zoom in on the viewport but it doesn't change the actual width of the device and hence doesn't effect the media queries. The settings already allow for you to alter the media queries associated with the various style sheets so you should be able to achieve this with Omega as it is.
I think the conversation here at a higher level is more about the purpose of media queries in a responsive/adaptive site and/or the purpose of Retina or Hi-DPI screens. The purpose of responsive/adaptive design isn't meant to "restrict" the user, it's made to adapt the content to the screen the user is on. Ideally you don't restrict function, just the layout of the content. If your site displays on a device that's of a certain size it shouldn't matter the px density that the screen has. This gets to the point of a retina display which, I believe, is to cram more pixels into the same objects that were there before. This greater pixel density allows for the deeper colors, smoother text etc. that we pay the extra money to have on our devices. If we treated retinas px for px we'd end up with a site that's just smaller but no less color dense or crisper. This would in-turn defeat the purpose of the high density screen and create a site that isn't very user friendly IMHO. In the end it's up to you as the site creator/designer on how you want to address the various screen sizes and densities. Personally, with the hi-dpi screens I try to feed them content that is able to take advantage of the higher resolution without changing any of the layout of the site.
Sorry for the long offshoot but it's something that comes up often and I think many people are wrestling with it as retina type screens are becoming more and more popular.
Comment #4
bunthorne commentedI think I see what you are saying. Even if I were allowed to zoom out to 0.5, the media query would still report the same browser width regardless of my zoom magnification? This feature request then becomes useless.
As I think you have summarized, the purpose is to allow a hi-res display to do something functionally similar to a static mobile site with a link that says "View Full Site." Feel free to close this issue if it is a dead end, or turn it into a feature request that can achieve the same goal.
Comment #5
cellar door commentedHaving a hi-resolution display show a "desktop version" version of the site is possible by modifying your media queries to reflect it, though I don't advise doing this. However, having a "View Full Site" link goes against the purpose of responsive site and frankly just isn't possible.
To do this you'll want to do something like mobile tools to detect the device and deliver the site/theme based on your settings. This won't be included in Omega though as it's a step backwards in dealing with mobile devices.
Comment #6
itarato commentedHi there,
I've seen the conversation and it's closed already but I reopened it to tell my reason and hoping you still consider adding it to the theme.
What I also would like to achieve is having my website adoptive to some screen sizes - particularly when it should be shrunk a little for a certain screen size.
Example:
- website is 1200 px wide
- screen is 1024 virtual pixel (retina or not - doesn't matter)
- shrinking automatically would be the expected result
Right now with the lowest 1.0 of minimum scale it's not possible.
By the iOS documentation the minimum scale is from >0 to 10.0:
http://developer.apple.com/library/safari/#documentation/appleapplicatio...
I think we should follow the standards too by allowing values below 1.0.
Another behaviour I'd like to propose is the possibility to leave initial scale empty. The reason is when you have an initial scale value, it's used. That means will scale the website to that exact value. However in real life it's often expected that the mobile browser scales the website automatically that fits to the screen size.
With the aforementioned example: I shouldn't set the initial scale to 1024/1200 = 0.85333.. I would like the browser scale it to the device.
I made a path and tested. It changes to simple things. Add low values to initial and minimum scales. And add an empty option to the initial scale value. When it's empty it's not presented in the viewport meta tag. Please, let me know your opinion about this, and consider applying my path.
Thank you!
Comment #7
bradhawkins commentedNice work itarato!
Patch works perfectly for me. I think this is a much better approach to the scale settings.
Comment #8
johnpitcairn commentedThere is a valid use-case here regardless of device resolution:
A portrait image that does not fit on the screen vertically in portrait mode forces the user to scroll to view the image. Minimum-scale less than 1 may allow the user to zoom out to view the entire image without scrolling.
Simple patch, works well here, where's the harm?
Comment #10
bunthorne commentedanyone interested in re-rolling the patch?
Comment #11
steinmb commentedComment #12
steinmb commentedGood or bad ides, here is a manual reroll.
Comment #13
avpaderno