Website on iPad off screen - ipad

I am creating a fixed width website in Drupal and I'm having trouble getting the website to fill the viewport on the iPad ( have not tested smaller devices yet).
If you look at cc-photobooths.mckernanms.com in portrait view you will see that the form runs off the screen. It should'nt.
Then if you rotate to landscape view it still is off screen. Then back to portrait and it stays zoomed in instead of going backmtomthe original view.
Any ideas how to fix this?

iOS devices use the Viewport metatag for setting resolutions specfic to its devices. You can set this and should help solve your issues.
Example Metatag for a 590px wide Viewport
<meta name="viewport" content="width=590">
I believe this link is a good place for reference on that. If you have any questions please ask.
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Related

Viewport problem in iphone chrome browser landscape mode

I'm having a special problem using Chrome on relatively newer iPhone models. (iPhone 11 or higher)
With the viewport set, there is no problem on portrait screen, but on landscape screen It doesn't seem to be calculating the width of the screen correctly.
current viewport settings :
<meta name="viewport" content="target-densitydpi=device-dpi, user-scalable=yes, width=1200, minimal-ui, minimum-scale=0.25, viewport-fit=cover">
In other words, the problem is that the content does not fit into the screen width properly and scrolling occurs.
!! It should be properly fitted as below !!
bug
normal
For reference, there is no problem at all in other device brand and browsers such as Safari and Firefox.
Is it possible to solve it by setting the viewport? Or should I write a separate script?
How can i solve it? I need your help.
Tried everything related to the viewport but failed..

Viewport-fit=cover breaks other views on iPhone. How to solve it?

I am building an app for the iPhone and I noticed that viewport-fit=cover, which is needed for the iPhone X view, is breaking my other views (let's say the iPhone 7).
What happens? Well, when I use viewport-fit=cover it pushes my content / body upwards, making it seem great on the iPhone X, but bad on iPhone 7, as the content gets closer to the statusbar above.
How can I solve this issue?
You can see the content (yellow things) very close to the statusbar, while it wasn't the case when I didn't optimised it for the iPhone X with viewport-fit=cover
Anyone care to help?

Both iOS WebView types incorrectly setting 320px viewport size on iPhone 6 and 6+ (Xamarin app)

I've been wrestling with this for a few hours now. Here's the repro scenario (Xamarin.iOS 8.10, iOS 8.2):
Created a (mostly) empty test web page (no stylesheet, just a width=100% on the body) with the following tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Page loaded in both a UIWebView and WKWebView (preferred) in a thin-client app designed for portrait mode on iPhone
Debug via iOS Simulator, attach to WebView instance in Safari on parent Mac
Viewport width always shows 320px when simulating both iPhone 6 and 6+, making the web page appear scaled too large
Same page loaded and debugged via mobile Safari
Viewport width shows 414px (6+) and 375px (6), as expected
I've experimented with SizeToFit() and ScalesPagesToFit on the WebViews and AutoresizingMask on the parent ViewController, but they don't seem to have any effect on the reported viewport size.
Does anyone have any idea why the WebViews have the wrong viewport dimensions? This is the prescribed approach everywhere I look. Is it an iOS issue, a Xamarin issue, or something I'm missing or potentially not doing correctly in code?
It turns out that the necessary launch images for the higher-res iPhones were present but not properly included in the iOS project, causing the app to load at the lower resolution of previous iPhones. Once Default-667h#2x.png and Default-736h#3x.png files were referenced, the app loaded as expected. Leave it to Apple to make their app runtime resolutions dependent upon something like the presence or absence of particular image files!
Use a storyboard for iOS9+. Less hassle having to deal with all those images too.
https://developer.xamarin.com/guides/ios/application_fundamentals/working_with_images/launch-screens/
NOTE: The information in this section is provided for historical reference only. Starting with iOS 9, Launch Screens should be created with Storyboards instead of including specific Image Asset Launch Screens for all of the different iOS Device types. Please see the Managing Launch Screens with Storyboards section below for details.

Intel App-Framework in UIWebView not showing navbar for iPhone 3.5" screen

I found Intel's App-Framework to be light-weight and fast. However, I am facing a problem that I just can't seems to overcome. In the framework, one can display a navbar that 'stick' to the bottom of the screen. This work fine on the browser, WebView in Android and UIWebView in IOS - except on iPhone with 3.5" screen - the navbar just didn't show up. It appears that the screen is too short to show it.
I have tried playing with "viewport" meta tag by setting various 'height' and disabling & changing OS theme. Nothing works. Anyone has experience on this? How do I adjust the navbar position?
As it turns out, it is not the problem of App-Framework; it is the way UIWebView is placed on the view. After correctly setting UIWebView's top and bottom constraints, I am able to see the navbar correctly set at the bottom of the screen.

How do I make iPads not zoom my web page when they rotate?

I have a web page that works no matter what size the viewport is, so it shows up well on iPad in either landscape or portrait mode. However, when you rotate from landscape to portrait, the iPad zooms in, and when you rotate back it doesn't zoom back out again.
Is there a way to make it zoom back out? Or not zoom in in the first place? The app should be fullscreen most of the time, after all.
I've tried playing with meta viewport, but disabling user scaling just means once it automatically zooms in you're stuck and you can't zoom back out again.
We have disabled user zooming and have used a media query to tell users to keep their device landscape for the best experience (it's a web based presentation) but if they have the device portrait at all it messes up the scaling when it switches back to landscape and they can't get back to the original state.
Update:
Worked out a fix for this issue. You need to make sure that the viewport meta has maximum and minimum scales set to 1 as well. Eg:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

Resources