[Solved] How to set Full screen for fixed layout - CSS-Tricks

This topic is empty.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
July 30, 2014 at 10:59 pm #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.

July 31, 2014 at 12:07 am #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">
```
August 1, 2014 at 6:42 am #177195

superhero
Participant

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

August 1, 2014 at 6:51 am #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.

August 1, 2014 at 7:09 am #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….

August 1, 2014 at 7:00 pm #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.

August 3, 2014 at 2:30 am #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();       
    }); 
```
August 3, 2014 at 6:45 am #177417

Larsinho
Participant

Though “solved”, this is definitely not RWD.

August 3, 2014 at 6:50 am #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 :)

August 3, 2014 at 11:59 am #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!
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The forum ‘CSS’ is closed to new topics and replies.