I am developing an iPhone/iPad app using PhoneGap and js/css3, and have recently started using the iPad's larger screen size to make specific adjustments to my layout.
I added an iPhone only section in my css with
#media screen and (max-device-width: 480px) {
and an iPad only section with
#media screen and (min-device-width: 481px) {
and they seemed to work fine on my desktop when I was debugging (using chrome, both in win and mac, and safari in mac).
When I built my app in xCode, and ran it on the device, it seems as though all the rules inside those sections are ignored completely, and my layout is all wrong.
Is there some trick I should use, in order to make this work for me?
It is important that you add the viewport to the head of your html document:
<html>
<head>
...
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
...
</head>
<body>
...
</body>
</html>
Also see:
CSS Media Query Orientation Change not working PhoneGap
Can you try
#media only screen and (-webkit-min-device-width: 481px) {
for your iPad only section and get back to me?
Related
Open the following HTML in Safari on any iPhone:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width
initial-scale=1.0
user-scalable=no" />
</head>
<body>
<div>Responsive design</div>
</body>
</html>
The things are rendered correctly: we have the same font size in portrait mode (viewport width = 320px for iPhone 5) and landscape mode (viewport width = 568px for iPhone 5).
Replace the text Responsive design with something like Responsive <!-- really? --> design (or some other tags, or add another simple div). See the difference???
It's rendered as if the viewport was 320px!
It's the most simple example. In some more complicated cases, I created several divs with correct font size on one page, but other divs' font was still incorrect.
No matter what the font is. You can use e.g. div { font: 20px Helvetica; }
Tested on:
the latest iOS 9.2.1 (device) — Safari, Chrome and other Safari-based browsers
iOS 7.1 / 8.4 / 9.2 simulators — Safari
The same issue... Is it a bug? or a feature? Why it's present there for years?
There's no such problem on iPad.
We have a website that our client uses which looks fine on iOS8 and iPhone 6/6 plus.
We wanted to display it in app in a UIWebView but noticed it was being zoomed.
We use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Should we also set #media
iPhone 5 and below Breakpoint:
#media (min-width: 320px) { … }
iPhone 6 Breakpoint:
#media (min-width: 375px) { … }
iPhone 6 Plus Breakpoint:
#media (min-width: 414px) { … }
We tried checking scaledPageToFit on UIWebView in storyboard but it seems to have no effect.
See screenshot for the problem
Any ideas.
Like rdurand said, you need to add launch images to your iPhone project. You can either specify a Launch screen file or a launch image source. Once you do that, then your app will not look scaled up or zoomed in.
Can be fixed by setting up the iPhone 6/6 plus launch images.
Id also recommend using ASSET CATALOG CREATOR -
https://itunes.apple.com/gb/app/asset-catalog-creator-app/id809625456?mt=12
Run it twice for IOS ICONS/ IOS SPLASH
then just drag the *xassets files into your project and replace the current only.
HERES how to check if app is zooming:
Problem Demo
The problem is visible on IOS device (tested on iPhone 5). When viewing the page in landscape mode and switching to portrait mode, white space on the right side of the page shows up.It should be connected with mobile browser that is supported by iOS devices (Safari).
I tested on Xperia V for example and this problem is not there. Do you have any suggestions on how could i fix this issue?
The template is build on bootstrap and uses owl carousel in the slider. Any help would be appreciated!
add this to your head section:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
i had a similar issue with a kindle and this helped me out... hope is works.
So I have a mobile theme working on my wordpress site and I want to use a splash screen for when users launch the app/site from their home screen.
However, for some reason, I cannot get it to work, and I think the reason to this might mainly be the fact I am running iOS7
<link rel="shortcut icon" href="/favicon.png" />
<meta name="apple-mobile-web-app-title" content="The Ixellian">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="http://ixellian.be/splash/iPhone3G-01.png" media="screen and (max-device-width : 320px)">
<link rel="apple-touch-startup-image" href="http://ixellian.be//splash/iPhone4-01.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">
<link rel="apple-touch-startup-image" href="http://ixellian.be//splash/iPhone5-01.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">
This code is in the same place where I have my favicon, the header.php. And I really have no idea what could makeit not work.
I tried to use a plugin to see if someone else's code makes it work, so I tried "Add to home screen WP" plugin and the only thing that it did get working was the fullscreen mode.
Anyone know if the splashscreen thing is an iOS7 bug?
If you need any closer details, please go ahead and ask me, I'll gladly help you to help me.
Thanks in advance!
Here you have the solution:
http://taylor.fausak.me/2013/11/01/ios-7-web-apps/
The splash images must have the right resolution:
If none of the startup images are the right resolution, Safari will
simply display a white screen. Note that all startup images are
actually in portrait orientation. Landscape images should be rotated
90 degrees clockwise. There are no landscape startup images for
iPhones since they always start in the same orientation.
The resolutions are:
iPad retina portrait: 1536x2008px
iPad retina landscape: 1496x2048px
iPad portrait: 768x1004px
iPad landscape: 748x1024px
iPhone 4": 640x1096px
iPhone 3.5" retina: 640x920px
iPhone 3.5": 320x460px
The difference with the full resolution value is due the status bar (20px for non-retina and 40px for retina).
I actually managed to solve it with an updated version of the WP plugin I mentioned before. If that fails, I'd try fcducarte's answer.
I would like to include the user-scalable=no option in my web template so that 640px wide devices and below do not scale. The current design scales well at screen sizes larger than 640 but the iPad (with a 1024px wide interface landscape) is obeying the user-scalable option. I want the iPad to behave like a desktop and allow users to zoom. I do not want the iPhone and the Android to zoom.
<meta name="viewport" content="user-scalable=no">
How do I force the iPad, and other mobile devices with a screen width of 640px or larger, into ignoring the user-scalable=no option? Im looking for the same behavior achieved using css media queries where you can specify a range of screen widths to apply the setting to.
I eventually got what I was looking for by using the following:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />
I don't exactly understand what you are trying to achieve. However, did you look at other scaling properties, maybe you can achieve what you want using these. With the following settings the user can zoom, but not below 640px width, which is what I assume you want:
<meta name="viewport" content="width=640, initial-scale=1.0, minimum-scale=1.0">