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..
Related
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?
I'm working on the iPad version of a web project and am using Safari's web inspector to work with CSS layout etc. However I've tracked my bug to the viewport meta tag.
When an iPad Air with iOS 9.0 - 9.2 is in portrait mode the viewport meta rules are broken/ignored. Here is a screenshot of the issue from an iPad air iOS 9.2:
The Problem:
When in portrait the computed width for the html and body tag is 768px yet there is a white space to the right that is about 300px. Also user-scalable=no does not apply. Fixed items like the nav and footer appear as 100% as seen in the image.
Landscape is fine and all other devices / OS' are working as expected.
The website is Utilidata.com. Has anyone seen this behavior or know of a fix?
<meta name="viewport" content="width=device-height, initial-scale=1, user-scalable=no"/>
UPDATE: I'm seeing reddit people freaking out about iOS 9's viewport issues. However their shrink-to-fit=no solution doesn't fix.
Make sure to incorporate below changes to meta > viewport:
Remove width=device-width and height=device-height
Also set
*-scale to 1.0001 from 1.0.
-
<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>
Worked well for me! Good Luck!!!
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.
I have a UIWebView containing some HTML where the containing div's width and height are set to 100%. This works great on iOS 6, where the div fills the UIWebView in both portrait and horizontal orientation. When I run it on iOS 5.1 it doesn't work. The div's width seems to be 100% of the iPad's screen instead of the UIWebView. The UIWebView enables the horizontal scrollbar and the content gets too wide.
What should I do to handle the needs of iOS 5 in this situation?
I have tried to insert some viewport options as mentioned in the comments of iOS 5 and iOS 6 - UIWebView difference in behaviour, but it does not seem to make any difference.
I was always bothered by this pre-iOS-6 behavior, because as you say by default UIWebView uses the device's screen size, not the view view's frame. However adding the following viewport meta fixes the issue for me also on iOS 5. Try making sure to only load the content once the web view has its final frame.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
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