I have developed a jquery mobile application for my site http://tastykhana.in/m there is an issue when the application is opened in the Android default web-kit browser.
I have to zoom in to view the UI correctly as it does not fit the screen and the fonts, input are very small.
What am i doing wrong here, as the site works well in the opera mini browser.
Should be something with the page's CSS, have you tried using something like
content="width=device-width; initial-scale=1.0; maximum-scale=1.0;
Here is a simple tutorial:
http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
Related
Hi I'm using primeng library with angular version 8.
I'm using 3 dropdowns and 1 calendar. And Only on iOS devices on mobile view When I choose an option from dropdown or click to choose a day on calendar, it zooms in.
I tested it with chrome, safari and firefox -> same issue on all the browsers
link to video
It's because of the font-size (built-in behavior of the browser for the pages with font-size less than 16px). You can add metatag to prevent this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.
http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps.
The old window.scrollTo() which worked for iOS6 no longer works.
Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
With iOS 7 I don't think you really have a choice. Obviously Apple doesn't want developers doing this anymore, and even if someone finds another workaround it probably won't stick around for that long.
Honestly, I think getting fullscreen functionality is a fair trade off for users to install the app to their home screen. Obviously there are certain cases where this isn't true, but I guess I find it understandable to some degree. You should still be able to add the following meta tag and it will be fullscreen once added to home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
There are a few nice libraries out there that add an "add to homescreen" prompt that you can set up to be rather unobtrusive with custom messages. In this case, might be best to embrace the change...
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 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.
So you can make a website go "full screen" and hide the addressbar/chrome on ipad if the user adds your page to their home screen, which makes an icon on the home screen that they launch your site from. You just put some meta tags like this:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
However, I haven't been able to get a site to hide the browser chrome when the page is just in a normal browsing session (the user hasn't launched your site directly from an icon on their home screen). Is it possible to do so? How?
According to the Apple Docs it doesn't specifically say you can't (however as you've noted, it appears to only behave as desired when the site has been added to your home screen).
I also noted that on the Apple Support Forum the consensus seems to be that you need to launch from the home screen to get the desired effect.
Quote from Docs:
apple-mobile-web-app-capable
Sets whether a web application runs in full-screen mode.
Syntax
<meta name="apple-mobile-web-app-capable" content="yes">
Discussion
If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.
You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
Availability
Available in iOS 2.1 and later.
I found this works,
$('body').delay('1000').animate({ scrollTop: '0px' }, 'slow');
I noticed that scrolling down removed it, so scrolled 60px (height of the chrome), but that hide it and scrolled down the page, but a scroll of 0px, assuming your page has started at the top (not on a # target), fools it!
I guess you could even remove the delay and animate, but I wanted it to be smooth, and not too jerky.