I thought that CSS #media query will work with pinch-zoom on iOS devices this way - user zoom an image and since the "area" become larger #media "replace" this image with larger(hq) one if it is present in a code (spoiler: I was wrong).
So, I start implementing it, code example:
<picture>
<source media="(max-width: 300px) and (orientation: portrait)" srcset="/image_1_1.png 1x, /image_1_2.png 2x, image_1_3.png 3x" />
<source media="(max-width: 500px) and (orientation: landscape)" srcset="/image_2_1.png 1x, /image_2_2.png 2x, image_2_3.png 3x" />
</picture>
I have a hi-res images on my site, and I simply cover all main screen size same way as in example above to reduce the load on devices with smaller screen, but when I tried to zoom in on it on iOS device nothing is happened, the image is just became lower in quality, no large one is replacing this smaller one.
I want to reduce the load time and bandwidth on devices which has no need in HQ graphics on page load, but if users want to take a closer look on images (zoom) they be provided with HQ copy of zoomed image.
How it can be done? (iOS compatible, pure CSS only)
//Yes, I saw other topics on this subject and in some of them I noticed that #media rules have to be applied automatically when zoom event occurs, but as I explained above, not in my case (addressing possible duplicate question mark).
Related
I'm trying to programmatically adapt my website's image sizes for differently sized devices. But now I am having trouble telling what sizes I actually need. In Google Chrome emulator, I'm seeing some of my images upsized, e.g. on iPhone 6 from 230x230 natural to 357x357 displayed. The image takes up nearly the entire width of the emulated screen, and looks just slightly degraded, suggesting iPhone 6's width isn't much larger than 357 pixels.
But Apple says the iPhone 6 has a resolution of 750x1334! If that were true, the image should look much worse, I would think.
I've found some contradictory information on iPhone 4 as well.
This site talks about iPhone 4 at 640x960 pixels. Chrome emulator again shows it at half those dimensions, 320x480.
This stackoverflow question says that "the iPhone screen is 320x480 definitely."
What am I missing here? Why do some sources (including Apple) supply dimensions that are twice what Chrome emulator (and my images) say?
Relax, you're about to understand this mess. Just notice that 2 * 375x667 = 750x1334.
A pixel is not a pixel
The key thing is: one device pixel is different from one CSS pixel.
They are the same in low pixel density devices like your computer screen (96 dpi). However, high pixel density devices like smartphones and printers (upwards of 160 dpi) try to obey the general W3C CSS3 spec understanding that one CSS pixel should always be close to 1/96th of an inch (or 0.26 mm) when viewed from usual distance (arm's length).
They don't obey the spec to the letter, since that would imply 1px being exactly 1/96th of one real inch in high DPI settings, which wasn't ever implemented in any browser AFAIK. However, they try to make their CSS pixels not so minuscule despite very high pixel densities by making one CSS pixel equal to two or more device pixels.
Chrome Device Mode works with CSS pixels, which is what you should use to design text, navbars, headings etc, but not high-resolution images. For these, read the next section.
If you didn't notice, the image above shows that Chrome Device Mode does show you the device scale (how many device pixels equal one CSS pixel).
Fixing image resolution
As you already know, this affects images negatively, since the browser scales the image as well. Your 230x230 CSS pixels picture becomes 460x460 device pixels, using the same quality. To fix that, use the srcset attribute to give the browser links to different resolution files of the same image.
Example (adapted from the link above):
<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">
An iPhone 6 will look at that and think "oh, I pretend to be 375px wide but I'm actually 750px, so I'll download wolf-800.jpg."
Just don't forget to use src="" for compatibility. Also, unless you use sizes="", the browser will default to the full width of the device.
I am developing an android app in PhoneGap . I have to adjust some button sizes as per the screen size on which the app is run .In android we have sp , dpi .Are there any similar type in jquery mobile.
I only caught a glimpse of jquery-mobile, as far as I know it does not directly address variable display sizes and pixel densities.
There are other mechanisms to handle this:
Set the viewport's target-densitydpi to medium-dpi (=160dpi). This virtualizes the px unit, e.g. 1px in html/css then corresponds to 2 physical pixels on a 320dpi device. Easy solution, but note that images are scaled as well.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
CSS: Use media queries to implement conditional styling. Adapting for different screen sizes dependent on width, height, aspect or orientation is straight-forward, see http://www.w3.org/TR/css3-mediaqueries/.
Different pixel densities can be handled with device-pixel-ratio (thanks to Marc Edwards for providing an example: https://gist.github.com/marcedwards/3446599).
#media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-o-min-device-pixel-ratio: 15/10)
{
body { background-image: ... } /* provide high-res image */
}
The media feature resolution is cleaner than device-pixel-ratio, but many browsers don't support it.
Use Javascript: Adapt button sizes, images etc. based on window.devicePixelRatio and window.screen.width and window.screen.height. Layouting per Javascript is considered as bad practice. Also flickering might result during loading as the execution starts after the pageload event.
I have an app that I'm testing on my macbook that generates images. They are fairly low resolution. Is there a way to make the images of a higher resolution, or do I have to go to the iPad to generate there? I have the following code that I was hoping would do the trick, but it didn't seem to do anything :
self.imageView.contentScaleFactor = 2.0;
Thanks in advance!
When doing screen snapshots, make sure the simulator's "Hardware" - "Device" settings is for a retina device. Then either the simulator's "File" - "Save Screen Shot" or doing it programmatically will yield a retina-resolution image (regardless of the setting for "Window" - "Scale" in the simulator). Just make sure you've configured the simulator to simulate "Retina" hardware.
When you generate these retina-quality images, though, you don't have the appearance of the physical device (which is nice to have when going to print). If you want the appearance of the physical device, you can marry these screen snapshots with the "Apple Product Images" on the Marketing Resources page (you need Photoshop to do this).
Ultimately, though, you're limited to the resolution of the digital assets in your app. For example, if you don't have retina-quality digital assets (e.g. only 320x480 resolution images), then it will look horribly pixelated when you print it.
And even full retina resolution screen snapshots will look a little pixelated when you print. If you scale your 640px wide screen snapshot in print, if it's much more than 2-3 inches wide when you print, you'll start to notice the pixelation and there's not a lot you can do about that (without cheating in Photoshop and replacing images with higher resolution assets).
I'm developing a site that will be visualized on iPad's Mobile Safari and standard PC's browsers.
To adapt my layout (especially a to the mobile browser, I'm using this CSS3 media query:
#media only screen and (max-width: 980px), only screen and (max-device-width: 1185px) {
#galleria {
margin-left:5%;
margin-top:15%;
}
}
#media only screen and (max-width: 1185px), only screen and (max-device-width: 980px) {
#galleria {
margin-left:16%;
margin-top:15%;
}
}
This method works, but when I rotate my device, the bugs comes out.
Basically in this page there's a called "logo" that represent an image, here's its CSS:
#logo {
position:absolute;
top:30px;
left:26%;
}
#logo img {
width:75%;
}
This image for each time that I rotate the device, becomes more smaller.
How can I avoid this bug?
Thanks for all the answers!
Since you are using a percent based width it's not becoming smaller, your screen is becoming bigger... it's ratio has not changed... that said, if you don't wish it to change size you can either not hard-code in a pixel size, instead of a percent size... or you can have javascript calculate the percent and convert it to a pixel size then load that in as the variable so once the screen is rotated it won't update to a new ("smaller illusion") size.
I have a page with a lot of text and a couple pictures (like a news article) that I want to display in a way that looks good for both a tablet-sized device and a phone-sized device.
What I do right now is make Scale to Fit = YES and have my html have the meta tag
<meta name='viewport' content='initial-scale=1.0, maximum-scale=10.0'/>
but the font size is really too small on the iPad. I tried to resolve it by making initial-scale=2.0 but now it looks huge on the iPhone and even on the galaxy tablet.
How can I deal with varying device sizes and have the font size appear in a way that looks good all on devices?
Perhaps a better question is how can I make UIWebView wrap-text again after I zoom in?
I would keep the scale the same at 1.0, but increase the text size as soon as there is more space available on larger screens. You can achieve this using css media queries:
#media screen and (min-width : 768px) {
/* Styles, for example to increase font size */
body { font-size: 120%; }
}
This will increase the body font size to 120% when displayed on a device with a screen width > 768 (iPad portrait width). You can use multiple of these rules for different widths of course.
W3 has the official Media Queries specification.