I am working on a PhoneGap application using jQuery Mobile.
Currently I am only testing in the iPhone and iPhone Retina-simulators.
When I open up the application in Retina-mode, the application's density is correct but the page is only half the screen size on both dimensions.
My own guess is that jQuery Mobile's css does not scale up the widths and heights, but I haven't been able to find anything about this.
My HTML has this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
And then I execute this Javascript:
if ($.mobile.media("screen and (min-width: 320px)")) {
if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
$('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
}
}
What am I missing?
I think you are guessing correct.
Look at the JQM.css file.
It only includes media queries for hi-res/lo-res icons. Everything else is "as is" on retina and non-retina devices, so JQM only supports retina in terms of icon-size.
By specifying initial-scale=.5, maximum-scale=.5, minimum-scale=.5 you are locking everything in at 50%. So there is your non-scalable half page.
The more you tailor for retina ("high-end") devices the more trouble you will have with standard browsers (especially "low end", like IE7). Check the JQM iconsprite positioning in IE7 for example - if you don't include a script like respond.js to support media queries, icons will be off-postion.
I think there is currently just not enough retina devices to warrant JQM providing a cross-browser retina and non-retina solution.
I found some good info here. I also did a CSS-only iOS tab-bar, which works down to IE7.
Check the CSS required in my plugin to just make icons and gradient backgrounds look good on all browsers and the amount of extras CSS necessary to tailor for IE7+8. A retina/non-retina JQM.css file would be nice to have but hard to download :-)
In your case you have to target images only and not the entire viewport.
the images have to half size down than your normal display.
Related
I'm working on a responsive email template for my employer. For the desktop size, I was able to leave the default font size at 16px and just use rem to adjust sizes as necessary. It looks fine on the desktop, in Gmail, and is fully responsive. However, when viewed in Mail on iPhone, the font is SO SMALL. I had to add a media query that increases the base font size to 26px to get reasonable font sizes in the email. I've tried doing some research, but it doesn't seem as if other people have had to do the same. There is very little CSS in the code, but here is what I have:
body, table, td, a, p, span {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
#media screen and (max-width: 600px) {
html, td {
font-size: 26px !important;
line-height: 1.3;
}
}
I also have
<meta name="viewport" content="width=device-width, initial-scale=1">
There is some other CSS having to do with resizing images, with margins, etc. but that is the only CSS dealing with font-sizes (all the rem info is inline so it isn't stripped out by Bronto/Gmail). If I resize it in the browser to a mobile size, the text looks massive, but when viewed on my iPhone, it looks great. I'm concerned that this may be an iPhone quirk though and that it will look massive on other types of devices. Does anyone have any insight?
Here is some code from the templates I use (where I don't see this issue):
Try making your <meta> tags look more like this:
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width">
The first tag disables auto-scale in iOS 10 Mail, which could be affecting your text size. The second tag sets the viewport; forcing initial-scale shouldn't be necessary and could be throwing off your design.
Also try moving the inline body styles from the <body> tag to inside a universal selector in <style>, like so:
<style>
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
</style>
<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
Have you heard of the viewport meta tag? You should consider adding this tag to the meta on your site. Just be cautious though as it could manipulate other HTML elements you have already configured.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is a link to a page explaining what it does in further detail.
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Okay, finally figured it out. Luckily I had been going through and making all our email templates responsive, and one of them didn't have a hero image. Guess what? The font size looked massive on mobile for the imageless-template! So after some experimentation, I found that
img {
width: 100% !important;
}
completely resolved the issue, so that now the actual font-size matches what is set in the CSS. Despite all the width:100% styles set on the image itself and on its parent containers, somehow the image must have been too large and triggered a resize of all content, I guess? If anyone has an explanation I'd love to hear it.
FWIW, I think you are complicating your life trying to use the text-size-adjust property.
According to the browser compatibility chart on this MDN document, there is poor browser support and it's buggy.
Secondly, the way I read this W3C doc I don't think you are using it for its intended purpose. W3C states that:
This module contains features of CSS relating to one possible
mechanism for adapting pages designed for desktop computer displays
for display on smaller screens such as those of mobile phones...
Its purpose is to provide a solution for pages which were designed for desktop display only.
As you know, older web pages which don't use the viewport meta tag will be scaled down to fit the viewport of a mobile device. The problem with this is that text often becomes too small to read and this text-size-adjust property proposes to remedy this by enlarging text on mobile devices.
I think if you continue to use the viewport meta tag, make your template responsive, and size elements so that they display well in all devices you would get good results if you don't use text-size-adjust, i.e. some like the following:
body, table, td, a, p, span {font-size:16px;}
Good sources of info about text-size-adjust:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust?v=control
https://drafts.csswg.org/css-size-adjust/#text-size-adjust
https://caniuse.com/#search=font-size-adjust
I have an existing Ruby on Rails 4 application and I have set up bootstrap within. The buttons, forms and other small things I've utilised have been great!
Now I am absolutely perplexed when it comes to bootstrap and responsive design. From what I've read, embedding bootstrap into your app should be responsive out of the box, but this doesn't seem to be the case (or maybe I'm doing it wrong).
In my application.html.erb head tag I have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I've looked at this section on the bootstrap site, but I don't see how adding hidden/visible classes is going to help my case, especially when header/footer widths need to change when the browser gets smaller.
I've been doing stuff like this so far:
#media only screen and (min-width : 175px) and (max-width : 400px) {
/* styles here for 175px to 400px */
}
So what I've been doing is setting up my own media queries. Now my question is: IS setting up media queries necessary when using the bootstrap framework? I've had some OK success so far using my own queries, but it's very, very tedious: everything on my site looks pretty good when the browser is large, but when it gets small, everything goes to shit.
If anyone could offer some insight on this, it would be much appreciated. I feel like I'm making responsive design much harder than it ought to be.
Integrate bootstrap into your app does not mean your website become responsive. It depends on the elements and classes that you are using on your site. If you have lots of custom CSS classes then you will need to define your own #media query.
In this case, I think you should take a deeper look into your app to see if you are really using Bootstrap classes in all places. If you see strange behaviors on mobile devices, then it should be because of your custom CSS classes
If you look into bootstraps documentation, bootstrap 3 has a lot of css features which will help you to make your app responsive.
Grid System:
Bootstrap 3 provides you grid classes according to your device like: col-md-1(for medium size desktop), col-sm-1(for your tablet) ,col-xs-1(for your mobile) so if you want to resize a particular element according to your device you can give that element classes like:
<div class="col-md-8 col-sm-4 col-xs-2"></div>
Now this div will have different width depending on the device width.
Media Queries:
Bootstrap 3 use the following media queries in our Less files to create the key breakpoints in grid system.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Media queries will be helpful if you want to change typography or want to override any style according to device
Images:
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Responsive Utilities
For faster mobile-friendly development, use these utility classes like .visible-xs, .visible-sm etc for showing and hiding content by device. You can simply apply these classes to any element and they will be visible or hidden according to your device
My site (http://thepearlguide.co.ug) displays so awkwardly on the iPad as compared to other tablets.
I have searched and tried different solutions with no success http://pixelproductionsinc.com/pixelblog/how-to-fix-background-image-scaling-on-ipad-safari-browser/
Please help.
Check out this site.
You can add some css for only ipads using media queries and set the default zoom level to something that makes your site look right using a meta tag:
<meta name="viewport" content="width = 768, initial-scale=0.68, minimum-scale = 0.5, maximum-scale = 1.25"/>
Your site is designed for PC not for iPad, Tablet or Phone. You have to design your site for all devices using responsive design.
i have a mobile website for iphone and ipad where i disable user zooming with
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
this works fine as long as the site is in landscape mode. the width of the website is exactly the width of the screen.
then if i rotate the device into portrait mode it gets scaled down so that it fits the new (shorter) width. this is also ok.
but then if i rotate it back to landscape mode it is suddenly scaled to about 125% that means horizontal scrolling is now possible and zooming is not possible since initially disabled.
how can i make it back at 100% zoom when rotated back to landscape?
thanks!
try experimenting with maximum-scale and minimum-scale like so
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />
and see if you can achieve what you are looking for..
Disabling zoom is a bad idea. It's not a perfect solution, but targeting webkit's scaling of font size on orientation change can help minimize the problem. You would leave the head of the document with:
<meta name="viewport" content="width=device-width, initial-scale=1">
Then you would address the font-size scaling in your CSS like this:
body {
font-size: 1.5rem;
line-height: 2.3rem;
-webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**
Using the maximum-scale and minimum-scaleto stop zooming don't really work because then you take away the user's ability to zoom. That's really a bad idea because it makes your users with bad eyes angry that your website doesn't zoom, while other websites do...
I tried timeouts and all kinds of fancy javascript, then I found this:
https://github.com/scottjehl/iOS-Orientationchange-Fix
via this related question: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
On that post, Andrew Ashbacher posted a link to the code written by Scott Jehl:
/*! A fix for the iOS orientationchange zoom bug. Script by #scottjehl, rebound by #wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);
That is a solution wrapped nicely in an IIFE so you don't have to worry about name-space issues.
Just drop it in to your script (not into document.ready() if you're using jQuery) and viola!
All it does is disable zoom on devicemotion events that indicate that orientationchange is imminent. It's the best solution I've seen because it actually works and doesn't disable zoom.
EDIT: this approach is not always reliable, especially when you are holding the ipad at an angle. also, i don't think this event is available to gen 1 ipads
I developed a web app for the iPhone which has a page with a textarea widget. When I begin editing the contents of this textarea widget Safari zooms in and makes the text really, really big. Now I can't see the document anymore, just a little postage stamp sized piece of it.
Are there any properties I can set which will keep mobile Safari from doint this? I just want the textarea font to stay the same size when I edit its text. Thanks.
You can add:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
to your HTML header.
You would need to set your textarea font-size to 16px and have an initial-scale of 1.0.
But if your app is not really designed for the iPhone, that is, if it’s essentially a normal web page that users should be able to scale, then you should probably just become okay with it. The worst thing to do to your users is show them 6pt text they can’t zoom, you know? Some of them won’t have perfect vision.
See also: Apple's list of all Safari/iOS special meta tags.