Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] How to set Full screen for fixed layout

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #177066
    superhero
    Participant

    My website is: http://independenttruckersgroup.com. It’s a fixed width, non-responsive page. How do I make it fit into full screen when viewing from iphone ? Tested on browser desktop under windows, ipad, and android. All can fit in nicely into full screen. But it failed when tested using browser under mac or iphone. A horizontal scroller appear in iphone or browser under mac.

    For the note, the fixed width I’m using for the body is 1903pixel. I read that the default iphone max-width is 980pixel. I also read that, when the width is bigger than 980pixel, usually it will be automatically scale down to fit the screen. So the elements will becomes smaller, but no horizontal scroller appear. Which is that is what I’m trying to achieve. I’ve tried using viewport metatag, but no luck with the result.

    The closest I get is using transform: scale(0.705); transform-origin: 0 0;
    But that creates another issue where there is a large empty space at the bottom of the page.

    Appreciate any help on this. Thanks.

    #177072
    Paulie_D
    Member

    I also read that, when the width is bigger than 980pixel, usually it will be automatically scale down to fit the screen.

    That’s not necessarily true….it’s certainly not true on my laptop. Nearly 2000px is HUGE and seems a little like overkill to me.

    However you might try adding this viewport meta tag into the <head>…it might help.

    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    #177195
    superhero
    Participant

    @Paulie_D, I’ve tried that, it looks even bigger compare to not having viewport at all.

    #177196
    superhero
    Participant

    @Atelierbram, unfortunately that decision is not mine to make. I did the page for my client and she specifically ask for fixed layout with over-large elements (big fonts, big images, big spacing), but she wanted the site to not have horizontal scroller when viewed by any devices. And since these days I’m specializing in responsive layout, that’s why I use bootstrap regardless the fixed layout request. If you check docdial.com, it can fit full screen in any device. I’ve checked that docdial.com, provide a smaller 1000px version to fit in small devices. But I’m looking for a quicker solution. Supposedly using meta viewport or zoom/css scale transform. Any help or other recommendation would be much appreciated.

    #177198
    Paulie_D
    Member

    There’s a difference between fixed layout and fixed px widths.

    If you want responsiveness. adaptability, the fixed px values have got to go….

    #177272
    superhero
    Participant

    There is no restriction in code. So, if removing the floats inside absolute positioned wrapper could solve the problem, please do enlighten me with sample of code.

    So to summarize again, i’m looking for a solution to make a 1920pixel width to fit in 1 full screen for iphone. Android and ipad works perfectly without any extra code, I’m wondering if there is a hack that works only for iphone.

    #177398
    superhero
    Participant

    Finally got it to work. Here is the code. I wrap the body with fit-wrap. Hope it helps other with similar issue:

    app.fn.autofit = function() {
        // initial fixed width
        var minW = 1903;
    
        if ($(window).width() &lt; minW) {
            var ratio = $(window).width() / minW;
    
            // For chrome and safari, use zoom
            var detect = navigator.userAgent.toLowerCase();
            if((detect.indexOf('chrome') + 1) || (detect.indexOf('safari') + 1)) {
                $(document.body).css('zoom', ratio);
            } else {
                // Other browser that doesn't support zoom, use -moz-transform to scale and compensate for lost width
                $('#fit-wrap').css('-webkit-transform', "scale(" + ratio + ")");
                $('#fit-wrap').css('-moz-transform', "scale(" + ratio + ")");
                $('#fit-wrap').css('-ms-transform', "scale(" + ratio + ")");
                $('#fit-wrap').css('transform', "scale(" + ratio + ")");
                $('#fit-wrap').width($(window).width() / ratio + 10);
            }
        } else {
            $(document.body).css('zoom', '');
            $('#fit-wrap').css('-webkit-transform', "");
            $('#fit-wrap').css('-moz-transform', "");
            $('#fit-wrap').css('-ms-transform', "");
            $('#fit-wrap').css('transform', "");        
            $('#fit-wrap').width("");
        }
    } 
    
        // init autofit
        app.fn.autofit();
    
        // Resized based on screen size
        app.el['window'].resize(function() {
            app.fn.autofit();       
        }); 
    
    #177417
    Larsinho
    Participant

    Though “solved”, this is definitely not RWD.

    #177418
    superhero
    Participant

    No, it’s not RWD. From beginning she insisted to use fixed width, regardless my objection. Also, my client doesn’t want to pay extra money to set it up as RWD, and the hack solution is fine for her :)

    #177433
    Paul Sullivan
    Participant

    No one seems to be reading the fact that his client specifically asked for this fixed width site and that he tried to convince her it was not the best course of action. o.0

    Anyway, very good job at making an awkward client request work!

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.