Resize / auto size page for kindle touch

[georg90]

Hi! I know this has long been abandoned, but maybe I am lucky. I am trying to get this to work on a Kindle Touch. It's working, but it's not extending to the end of the screen.

I am using landscape mode, but same happens in portrait mode. (used the online example to test)

Is there anyone knowing whats causing this? I tried to find anything resizing / size related in the code but wasn't very successful..

[matopeto]

Hi, project is not abadoned (no commits because it is working for me)

CSS is responsive self resized to all available space, so maybe is problem with something else.

1. Also i noticed that there is no url address line, is this some fullscreen mode that kindle touch has?
2. Is this default browser?
3. Is this default Kindle OS, or some 3rd party? Or some jailbreak tweak?
4. How it is working/looking in non fullscreen mode? (can you provide screenshot)
5. How it is working/looking if you set rotation to landscape in weather settings (can you provide screenshot)

thanks for reply

[matopeto]

I look carfully to your image and it seems to be "good" layout if they will be addressbar (empty space is adressbar space) Only problem in this is long german words thats overlapping :)

but i look at the code and CSS is not fully responsive

I see in code:

       // But kindle 4 doesn't support rem (so all sizes are fixed fallback for kindle 4)
        // Kindle 4 viewport: 600x706 (landscape 800x506) (in window.load event, window.resize event is not called)

So for old kildne 3 and 4 (and maybe for this kindle touch) are sizes hardcoded (not responsive). It is hardcoded for that viewport.

Simple solution is clone/download code and change css to match your viewport. When i will be on PC and i will have a time i will look on the CSS and try to tell you what you have to chage.

[georg90]

Thank you @matopeto for the quick reply.

I fixed it by setting a fixed viewport like so:

function viewport() {
            var e = window, a = 'inner';
            if (!('innerWidth' in window )) {
                a = 'client';
                e = document.documentElement || document.body;
            }
            //return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
            // fixed format for kindle touch (K5)
            return { width : 600 , height : 800 };
        }

Unfortunately now I still have a blank space at the bottom of the page, the content is 100% scaled, but the black scrollbar is still present and I can scroll down. I think kindle is somehow ignoring the overflow: hidden directives from kindle.css.

1. I use "Weblaunch" https://github.com/PaulFreund/WebLaunch
2. No, Weblaunch
3. Not tested since it's now "fullscreen" (with the mentioned issue of the scrollbar being present)
4. I created a custom landscape mode, because weblaunch has also a setting for landscape mode. Maybe they're interfering each other?

          } else if (rot === "ne") {
                // landscape custom for kindle 5 with Weblaunch extension
                page.className = "landscape";
                forcedRotation = true;

                page.style.transform = "";
                page.style.transformOrigin = "";
                page.style.webkitTransform = "";
                page.style.webkitTransformOrigin = "";
                page.style.position = "";
                page.style.top = "";
                page.style.background = "";
                page.style.height = v.width + "px";
                page.style.width = v.height + "px";

[matopeto]

I think you are on good way. But I do not known "Weblaunch" and not known how it works.

first i will try remove "height: 100%" from #page css definition with your custom hardcoded viewport. If it will not work try another solutions

Custom landscape mode can interfering. Try disable autorotate of weblaunch and use landscape rotation in settings or use autorotate of weblaunch and use default/none rotation in settings. Or try switch width and height in viewport functio.

Can you provide a screenshot with current state?

(but this is wired, all sizes are in percents, so it should scale if viewport/page size is right)

[georg90]

Fixed it.

Issue was indeed Weblaunch, I used the version from here: https://github.com/lucasmpr/WebLaunch and changed a little to remove the title bar. Now it's fullscreen without scrollbars.

Your script is working awesome! I will change it though to display sensor values + weather. Will try to fork and upload when I am happy.

Thank you for the help!

[matopeto]

i am glad to hear that it is working now :)