Do you know if it's possible to make a fixed-layout ePub which displays one page everytime in iBooks regardless of whether it's in landscape mode or portrait mode?
It looks like a combination of <meta property="rendition:layout">pre-paginated</meta> and <meta property="rendition:orientation">auto</meta> should do the trick.
cf. http://epubsecrets.com/fixed-layout-in-epub-3-0-draft-metadata-property-definitions.php
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 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.
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
I have a mobile version of a website that uses CSS media queries to determine orientation.
The layout changes based on landscape / portrait and adjusts widths accordingly.
Recently the companion native mobile app has been published in the Apple app store - and I implemented the Apple Smart App Banner.
The problem is that while the Smart Banner is displayed - the layout rendered is that for the landscape version - no matter the actual orientation.
This is an issue because in portrait everything looks funky.
I cannot find a workaround for this or what is going on.
To provide more context - this is a Rails project - mobile website is built using jQuery Mobile.
Has anyone else experienced this or know of a solution?
I believe this is a bug. I suspect iOS just sets the "landscape" flag if the usable width is larger than the usable height. When displaying smart app banners on 3.5" iPhones, this is the case. On 4" iPhone, it's not. That's why you're seeing this issue only on older iPhones.
I found a hacky workaround by using max-aspect-ratio:
<link rel="stylesheet" href="/css/portrait.css" media="all and (max-aspect-ratio: 4/3)">
<link rel="stylesheet" href="/css/landscape.css" media="all and (orientation:landscape) and (min-width: 480px)">
I am having problems on a book I am writing on iBooks Author using the Contemporary template. I did add an Image Gallery widget in landscape orientation, but it doesn't appear on portrait orientation.
Anyone knows what happens on portrait that it doesn't show the widget?
I found that you can only view the Gallery Widget in portrait mode if it is on a "page" not a "chapter" or "section" screen. It behaves differently though, it shows up smaller then goes fullscreen when you click on it.
I too had this same problem and I think that if the gallery widget is anchored to text, then it shows up in portrait mode.
It appears that widgets show only in the thumbnail track in Portrait mode. If, like me, you have hidden the thumbnail track (because you dont want to waste the real estate) you don't see the widget in Portrait mode.
Almost all widgets do not show up in portrait mode if you have them set to floating, check for that first.