I implemented a "mini epub reader" in my app. In order to determine how many pages are in a chapter (based on pagination for the underlying UIWebView frame width), I get the scrollWidth via
document.documentElement.scrollWidth
and using the CSS style
-webkit-column-width: (UIWebView's frame width).
and divide it by the UIWebView's frame width. So basically my "get next/previous page" uses the following Javascript
window.scrollTo()
Works fine except when the text fills up basically one viewable page exactly. In that case, it seems the document.documentElement.scrollWidth is one page (UIWebView width) larger than necessary, and what I see are blank pages at the end of a chapter.
Any ideas how to avoid this, or somehow detect "blank" content in the viewable area?
BTW, this is when I'm handling ePub files with Japanese tategaki, so in reality I'm using
document.documentElement.scrollHeight
but the idea should be the same.
Turns out, it was the margins causing the blanks. This CSS did the trick
margin-left: 0%; margin-right: 0%; margin-top: 0%; margin-bottom: 0%;
Related
Everything works fine on any desktop browsers. Regarding mobile browsers, I’m having a really weird issue with Chrome on iOS only.
First load of the website from the URL bar works well, viewport height is correct. However, if I open the same site from the history or bookmarks, the viewport height is wrong and doesn’t take into account the real viewport.
Here is the basic style css I use:
body, html {
height: 100%;
}
Below part of the code I used before:
body {
margin: 0;
padding: 0;
overflow-x: hidden;
min-width: 320px;
background: #fff;
}
Here is the capture of the first load, there is not scroll bar and height viewport is correct:
Here is the capture on the second load of the page from the history, height is different and the page is scrollable:
Here are the logs, we can see that the height is different from the first load to the second load:
I’m not sure if I’m missing something but I disabled as much as possible my code, cleared the cache of the browser etc. but the issue persist. It happens on various iPhone models too.
Edit 12/20/2020
Here is a similar issue on a react website: https://www.kirupa.com/react/examples/react_router/index.html#/
If open via the link, viewport is correct. Reopening this website from the history, it will have a different height and a scroll bar will appear.
Thanks!
Try using
margin:0;
padding:0;
box-sizing:border-box;
}
And remove the display for html.
When using the picture tag with srcset, I can define different image sources for different viewport widths.
What I want however, is to define different images sources for the actual space (width-based) the image occupies after the browser has rendered the page.
For example:
Viewport width is 1920px Website uses container size of 1200px
Container is split into two columns of 600px each
Column 2 contains an image with 100% width - which will result in a width of 600px
The srcset for the image supplies 400x300px, 800x600px and 1200x900px
The browser should now automatically know to pick 800x600px
As long as it's clear that the image will always be in that spot, I could use srcset based on the viewport width.
Unfortunately, my site design is so, that content editors can freely add columns/rows and even nest them. Also at some point columns collapse and become always full-width. So when rendering the HTML, I cannot predict how much of the viewport width an image will get.
Therfor I would love to have the browser check how much pixels the image actually has when it's rendered to the user - and choose the appropiate image.
I have searched quite a bit, but couldn't find anything about that.
Is that even possible?
Or is the only solution a Javascript one?
No, sadly this is not possible yet. There has been much talk about element queries, basically media queries that apply to the element's size, instead of the windows size. But they are apparently really complicated to integrate. There is also no syntax for it yet. The classic problem that is often brought up (in pseudo-syntax), is something like this:
.child {
width: 500px;
}
.container:min-width(450px) > .child {
width: 400px;
}
so we set .child to 500px width, BUT then we say if the child's parent is more than 450px, the .child should have a width of 400px, thus .container would be less than 450px again, and .child is set again to 500px and so on and on. This causes what is called a "circularity problem".
There are also other problems, such as with dynamic layouts and the browser not really knowing how much space an element will take up beforehand. This could lead to huge performance issues, as the browser would simply have to calculate too much.
There are however JS libraries that try to implement this (e.g. EQCSS, CSS-Element-Queries or EQJS), but for your case a selfmade JS would probably be better. I'd recommend checking out how those libraries handle it though.
More info:
https://www.xanthir.com/b4PR0
https://webdesign.tutsplus.com/articles/the-current-state-of-element-queries--cms-29690
JS Libraries:
https://elementqueries.com/
http://marcj.github.io/css-element-queries/
https://github.com/snugug/eq.js
I have tried to make my site tokyocomedy.com to be responsive design down to a minimum of 320 pixels wide. Most, if not all, pages, such as this top page look reasonably good down to that size, using Firefox's responsive design view:
However, this one page, the schedule page, is not working:
The width it gets stuck at seems to be around 530 pixels:
The only thing that is different on this page is the calendar, so I could be wrong, but my best guess is that something about the calendar CSS or JavaScript is holding some minimum width or padding space or something. I have gone through all the elements I can find using the Firefox web developer inspector:
Relevant CSS IDs and classes seem to be #calendar, fc-toolbar, fc-header-toolbar, fc-view-container, fc-view, fc-list-month-view, fc-widget-content, and fc-widget-header. However, I can't find any width declarations, padding, margins, or any other sizing declaration that would explain why the page will not shrink horizontally. It's possible that maybe there is JavaScript acting on the styling that is altering it in a way that is less easy to find.
The page uses the fullcalendar v3.9.0 JavaScript library. I've put the CSS in use on PasteBin for reference.
What is preventing this calendar page from shrinking down to 320 pixels like other pages on the site?
There is a small error in your code. You need to use word-break css property here as your email text is big. kindly refer to attached screenshot.
Hope it solves your problem.
please add below two property and check
* {
box-sizing: border-box;
}
#maincontent {
float: left;
width: 100%;
}
You used display:inline-block style.css line no. 60 ,use display:block rather than display: inline-block
#maincontent, #upcomingshows, #recentblog{
display:block;
vertical-align: top;
}
I am working on a responsive design that includes iFrames to load Wordpress blogs. The page loads flawlessly on all browsers but native iOS Safari, but they do not load at all in Safari. Co-workers with iPhones suggest they load but don't scroll, which I understand is a simple meta change, but my testbed device (an iPod touch) won't load them even after a firmware update to iOS6 (and I therefore have to design as though iFrames do not load at all). Among the best alternative suggestions I read was to load content into a div.
The content loads into a div nicely. The challenge now is that the divs won't resize, and resizing dynamically is a requirement of the page (the page has a jQuery slideUp header, and content adjusts as it slides). So the iFrame resizes but does not load in iOS, and the div loads but won't resize in any browser. Here is the thoroughly hacked code:
HTML
<div id="iFrame1"></div>
CSS
#iFrame1 {
position:absolute; /* because I am trying everything */
display:block; /* Yes, divs are block inherently, this is hacked code */
float: left; /* there are two iframe divs */
overflow-y: auto;
height: 1px;
width: 45%;
}
JavaScript
function resizeIFrames(){
document.getElementById('iFrame1').style.height = document.getElementById("content").clientHeight - 150 + "px";
document.getElementById('iFrame1').style.minHeight = document.getElementById("content").clientHeight - 150 + "px";}
I am open to all recommendations that are cross-browser compliant. I will use iFrames, divs, tables, whatever. Guide me and I will listen.
My application generates HTML email templates. They are between 600px and 650px wide usually, but sometimes they go up to 900px. The templates are nested pretty deep (lots of table elements for email clients), and sadly all the widths/heights are hard-coded in px, not relative dimensions. This has been ok until now, because my users view them in a browser. But now I am building a mobile app.
I am trying to display these templates in a webview inside various mobile clients (iPhone, Android, iPad, etc). Is there a way to 'scale' or fit these templates so they stretch to fill up the entire width of the window?
I tried tweaking the meta tag;
<meta name="viewport" content="width=device-width, initial-scale=1.0>
Unfortunately I don't know the width of the template beforehand so I have to either set the meta tag too wide or too small, and then templates either have white borders or end up overlapping the window. What else can I try?
I ended up using CSS3's
transform: scale(ratio);
position: absolute;
top: 5px; left: 5px;
after dynamically calculating the scale ratio to take into account the 5px margin. Turns out
minimum-scale=0.1
was necessary for an older Android phone to display the re-sized view correctly.