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.
Related
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).
I have a site up, http://www.webdesignrepo.com, where I'm using vw and vh a lot.
The site works absolutely fine on Desktop and on Android browsers, but goes haywire in iOS on both the iphone and the ipad. The Desktop media query is mainly vw and vh. Once you get down to <768px wide I have swapped out some of the viewport units with px units.
I have a feeling it's something easy to fix, and I'm just not seeing something simple.
The only thing I can think of is its calculating the vw and vh units incorrectly, which is odd because caniuse.com says iOS safari 6.1 and above supports viewport units.
Anyone have any idea why this is happening?
(And yes, I see the irony of this whole situation)
Thanks in advance
iOS 6 and 7 seem to calculate viewport height correctly at first, but any call to vh after rendering the page recalculates the viewport height and adds it to the previous value, inconsistently resulting in an enormously tall page. Unfortunately, this is not consistent and currently there is no known workaround.
The caniuse.com viewport section's interactive mode links to a GitHub issue page explaining in more detail and Emil Björklund explains with some diagrams on his blog.
In iOS the vw or vh units render incorrectly when content inside an element changes.
This site http://mjau-mjau.com/blog/ios-vh-bug/ provides a useful workaround using Javascript, and iOS specific.
I however, did not want to use JS and decide to override the vw and vh font sizes with em for all mobile devices,
#media only screen and (max-device-width: 480px) {
.caption h1{
font-size: 6em;
}
.caption h2{
font-size: 4.3em;
}
.caption h1:first-letter {
font-size: 1.5em;
}
.caption p {
font-size: 1.2em;
}
}
I am trying to understand the viewport meta tag for ios devices. I created a test page, where I inserted an image that is 862px wide. so i have the viewport meta tag as:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
Yet on the ipad 3, with a resolution width of 1536 pixels, and having the viewport set to the same amount of visible area of the ipad 3, the 862px image is blown up, and is a little larger in width than the visible area. so i have to scroll horizontally to see the rest of the image.
This makes me think that device-width is returning 768 pixels, and that accounts for the little bit extra of horizontal scroll for the 862 pixel image. Why is it doing this? Is there some kind of pixel density I have to account for?
UPDATE
I've tried setting the width to a numerical width, the same exact width of the image (in this case "862"). So the webpage is 862X206, the same as the image, yet it is doing the same exact thing as setting the width to device-width.
UPDATE 2
I created a very simple page, and for some reason a blank page with a viewport of 862 pixels causes horizontal and vertical scrolling on my ipad 3, the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=862, initial-scale=1.0">
</head>
<body style="width:100%; padding:0; margin:0">
</body>
</html>
This scrolling is causing the viewport not to fit inside the viewable area or screen size. I dont understand. Any insight would be greatly appreciated. Thank you. ** Note ** I forgot to add a reset of the padding and margin to 0, it was adding 8 px of margin.
UPDATE 3
Ok, originally, I thought that the device-width would return the resolution width of 1536 pixels of the ipad 3. Apparently, it returns the screen size of 768 pixels.
Any viewport width greater than 768, gives me scrolling on the ipad 3. why? what if you had a page that was 1024 pixels, and you want to fit that into the visible area of the ipad 3. you set the width to 1024, the initial-scale to 1, shouldn't that make the 1024px viewport fit into the viewable area?
SOLUTION
Ok, so, if you want to have each device figure out how to scale your page, all you do is leave out the initial-scale.
So if I set just the width, using either device-width or a numerical value, and leave out the initial-scale, it automatically calculates the zoom for you. and it just works.
my confusion lied in what the width meant, width means the width before the scale is applied,
so if i say:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
the width of the viewport before the scale is, 768, and if the webpage body is say 862px, and after the scale factor of 1.0 is applied, the content is multiplied by 1.0, 862*1.0, so the width of the viewport is now the width of the content scaled at that scale factor, 862px. i hope i understand this right. thats where my confusion was, was what width meant.
The iPad 3 is 768px wide, where each px represents 2 physical pixels. You can account for it in Javascript but not in your viewport as far as I know (and you probably don't want to, since those 768 px are the same physical size as the ones on earlier iPads).
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.
i have a page with a body width of 1050px. If I want a little amount of space on either side of the page (landscape), so it looks fun, what should i set the viewport meta tag to?
<meta name="viewport" content="width=1100"/>
.
the above doesn't have the desired effect for me.
And while I'm at it, what would the viewport be for a portrait view? Or does it not matter? (I know how to change the viewport values when an orientation change is detected... but for whatever reason, i can never get it so the stupid resizing effect is cancelled).
And while we're asking questions, can someone just put up what the viewport should be, for an ipad, for the following completely random and not at all related to what i'm doing sizes?
page width of:
300px
500px
1000px
1050px
1350px
1800px
cheers!
First of all, it is not recommended to set a fixed viewport width...It is best to set it to device-width as follows
<meta name="viewport" content="width=device-width"/>
If you are targetting multiple devices, it is best to use a % based layout and not fxed px values so that your page would scale as per the device viewport.
The iPhone and iPad have a default viewport width of 980px..So if you specify your body a width of 100% or say 90% and use align as center, your page would occupy around 880px with center alignment..