I have not a link to share at this point but was wondering if anyone had come across the same problem as myself.
I have made a responsive website, the client requested that the site should be responsive from 1080px in width down to 960px in width, this was easy to build and works on the Desktop but on the ipad in portrait the website is chopped off, in landscape however its perfect.
I'm thinking its something to do with the initial width being used on render..
I've tried:
<meta name = "viewport" content = "width=device-width; initial-scale = 1; maximum-scale=1; user-scalable = no;" />
and
<meta name="viewport" content="width=device-width, initial-scale=0.7">
as a "fix" maybe I should set a fixed width for ipad?
Leave your meta with initial-scale = 1;
Then go in you media queries and find if you are checking for ipad dimensions
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
Please bare in mind that you need extra media queries for ipad3/4
Related
I've been using Apple's Xcode tool (iOS Simulator) to code iPad views. I can't target landscape view on the iPad Retina device.
I've been trying the following media queries...
#media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
#media only screen and (min-device-width : 1536px) and (max-device-width
: 2048px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
I can't find any other way to target the landscape view in iPad Retina. I have even tried this code in different parts of the CSS file, still no luck at all.
The first one is correct, i use the same media query and is working on a real device.
Maybe you forgot to include the meta viewport?
I've just realized my FTP program was not working correctly when I entered the editor inside the Wordpress dashboard (the query was not there) so I manually wrote it dawn directly on my theme's CSS file and it worked.This FTP program stole hours from me.. but the query was right and the meta tag as well.
All in all, for anyone experiencing issues while coding new iPads Retina displays (32 and 64 bits), they should include the meta viewport in their headers:
<meta name="viewport" content="width=device-width, user-scalable=no">
and the corresponding query (Landscape view, in this case)is:
#media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
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.
Everywhere I read, the width of the screen on the Ipad 1 is 1024 x 768.
I have built a site using bootstrap and the collapsable nav button appears when viewing the site in landscape mode on my iPad. It should not. It should only appear for viewports that are less than 1024px in width.
I then sniffed out the width as jQuery sees it using $(window).width(); and it is reporting only 768px x 467px;
I have the following metatag:
meta name="viewport" content="width=device-width"
In landscape mode the iPad zooms content in so that the effective viewport with is the same as in portrait mode.
Try this - ISTR it's supposed to force all windows to 1:1 zoom, and prevents user zooming.
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
I've developed this page:
http://bluebeam.com/us/support/ipad/
The media queries are working fine in every browser but when I test it on an ipad it does nothing... It just reverts back to normal CSS. I've cleared browsing data on the iPad without results. I can see it working on my iPhone.
Can anyone spot an issue with my code?
Edit: the first query (horizontal layout) is working. But the second is not triggering when I flip the ipad (vertical layout).
If I remember correctly the iPad swaps the width/height values when the orientation changes. I would try this:
/* portrait*/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
/* landscape */
#media only screen
and (min-device-width : 1024px)
and (max-device-width : 768px)
Its been a year since I faced a similar problem so I could be a bit behind the times.
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">