I have designed a magazine for the iPad and now I would like to make it available for the iPhone as well. The problem is that the html pages of the magazine do not fully resize to the iPhone's width and about 30% of the page remains hidden to the right and needs scrolling/dragging.
I would like the page to 100% fit horizontally and be centred vertically.
I have already tried to change <meta name="viewport" content="width=1536"/> for <meta name="viewport" content="width=device-width"/> and while there is no change on the iPad, on the iPhone the page simply resized to the device's height and therefore it needs even more scrolling to the right.
The magazine only has portrait mode.
Related
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..
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
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 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">