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.
Related
I built a website for myself which I believe is responsive as per my testing with Firefox's responsive mode. I tested all the pages with the iPhone resolution (375*667) both landscape and portrait mode and it worked great.
However when I try to open the same site in Chrome, it does not display properly. It also shows the same effect when viewed from an iPhone.
This is my site - http://v1chu.github.io/
The background images in used in section 2 and 3 are missing whereas it is working fine with Firefox (also in responsive mode). I can't see the background in my device as well.
Also the site content looks very small when viewed in Chrome and device. But it looks just fine when viewed in Firefox.
Please tell me if the way I have built the site is right or not ? Or if something that I have missed which messes up the site on Chrome and devices.
You're heading in the right direction.
Problem #1, Background Images
Your background images don't appear because you are using the background-attachment property with the value fixed. It sets the background in relation to the viewport (browser window). You're basically pinning the background image to the top of the page and by the time you get to your 2nd and 3rd sections you've scrolled past the background image.
You have set background-attachment via the shorthand background property. Remove fixed from the background property.
background: url( '../img/aboutme.jpg' ) no-repeat center;
Problem #2, Text size
You need to use a responsive meta tag. Here's one that I use:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The problem seems to be here:
.s2 {
background: url(../img/aboutme.jpg) no-repeat center fixed;
}
I removed the fixed and the background displayed in chrome
s2 {
background: url(../img/aboutme.jpg) no-repeat center;
}
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...
I have built the following as test scenario: http://dev.driz.co.uk/Spinner/ for a webapp that will run on an iPhone Chromeless. If you open it up on your iPhone and add it to your homescreen you will see it as a full-screen web app complete with startup screen and preloader.
I have made the startup screen and first screen that the user will see the same as per the Apple documentation quoting: "Generally, design a launch image that is identical to the first screen of the app. Avoid including elements that might look different when the app finishes launching, so that users don’t experience a flash between the launch image and the first app screen."
As stated above, I have made them the same to prevent the flash that can happen between the startup and the app itself (usually due to different UI components, of which my don't change on startup). However I still get this flash! It's as though the app is showing the startup and then hiding and then showing the website which includes the showing the splash screen with the startup image again.
Any ideas on how I can combat this? I have even tried setting the html/body itself to have the background image of the startup screen but their is still a flash as it loads in. Also tried using an actual image instead of background, but again same issue.
Ok. Quick answer: Don't use the ios startup image imo, because it just shows very unrealiable and outside of ios you can't use it anyway. I don't know how long I tried to get a decent image to show and once you are talking different devices and formats it's just nasty with all the images you have to provide.
I have done a css/javascript splash screen, which I'm using for my own application (for example here). You can specify a portrait and landscape image (in 4 sizes) which get loaded depending on device.
The background is attached to the splash class, which I'm setting on the body and removing once the app has loaded.
I have put the code inside a repo on Github. Feel free to use. If you have any questions, let me know.
I am betting that the flash you are seeing is the background of the window, or your webview. It is most likely white, and when the app loads, it doesn't render the page immediately, so for a split second you see the white background of the window.
I would try editing the _window.backgroundColor (i'm guessing that property name) on your app delegate or in Interface Builder, and if that doesn't fix it see if you can edit the webview's background color. All may be dependent on whatever toolchain you are using to create the webapp (i.e. phonegap)
I do know that putting a loading image is true for the native app, but no where on the document you linked says it is true for web app as well.
Did you find a solution? I've found the problem is fundamental to the iPhone, regardless of your app.
Take this for example: it shows a website with a background of #ccc with a splash screen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the flicker. And if the splash screen is dark, it looks worse again.
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.
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/