media queries not working in index #637

benoitchantre · 2013-01-15T15:40:19Z

It appears that we cannot use media queries with the index page.
The document orientation isn't recognized and we cannot use max-device-width, maybe because the device-width info isn't updated on orientation change?

My index page uses media queries like other pages from my book, but only the index page (fullscreen) has problems with it's resize on orientation change.

Here's an simple test:

<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/test.css">
  </head>
  <body>
    <div id="wrapper">
    </div>
  </body>
</html>

body {
    margin: 0;
}

#wrapper {
    width: 100px;
    height: 100px;
    background-color: red;
}

/* Portrait */
@media only screen and (orientation : portrait) {

    #wrapper {
        width: 768px;
        height: 1024px;
        background-color: yellow;
    }

}

/* Landscape */
@media only screen and (orientation : landscape) {

    #wrapper {
        width: 1024px;
        height: 768px;
        background-color: blue;
    }

}

And when using device-width instead of orientation in media queries

body {
    margin: 0;
}

#wrapper {
    width: 100px;
    height: 100px;
    background-color: red;
}

/* Portrait */
@media only screen and (max-device-width : 768px) {

    #wrapper {
        width: 768px;
        height: 1024px;
        background-color: green;
    }

}

/* Landscape */
@media only screen and (max-device-width : 1024px) {

    #wrapper {
        width: 1024px;
        height: 768px;
        background-color: purple;
    }

}

anjimi · 2013-01-16T11:30:19Z

Hi @benoitchantre I found that media queries do work for the index, but the overall width/position of the index is always initialized at the dimensions for the portrait view. I worked out my styles so the total width of the index is the same for both portrait and landscape, you can set the height differently for each orientation.

the media query I use to set iPad landscape rules is:

@media only screen and (min-device-width : 768px) and (orientation : landscape) {
}

It would be great if Baker could initialize the index width independently for both orientations.

anjimi · 2013-01-16T11:36:55Z

Also, worth noting that device-width and device-height refer to the physical width/height of the device, regardless of orientation. min-width refers to the actual width, oriented. min-device-width refers to the narrowest dimension of a device screen. (on iPad and iPhone anyway.)

benoitchantre · 2013-01-16T11:51:52Z

Thanks for your infos @anjimi
I will make some tests.

folletto · 2013-01-16T12:12:50Z

I dug into that a bit and it might be a problem, but not a technical one, but a logical one. The reason is that right now the index code for the WebView reads the size of the HTML page to determine its size (height and width) and position. This means that the page needs to have these informations loaded for us to position it correctly.

As such... we either stop doing that, and allowing the index to "read" the width, or we find a way to work around it, somehow. This is however just my initial review, I didn't look too much yet into it. :)

benoitchantre · 2013-01-16T12:30:53Z

If we determine that an index page is displayed in full screen only, I think it would be easier: no need to read the size of the html page.

You could then display the content of the index how do you want with css

fullscreen or not
positioned where do you want
with a transparent background or not
...

What do you think @folletto ?

folletto · 2013-01-16T12:39:17Z

It adds a lot of overload of configuration that way. Consider that right now all you need to do (if you don't want to do anything too fancy) is to write a HTML file. We need to keep it simple. :)

benoitchantre · 2013-01-16T12:47:38Z

You mean for the end user?
I thought that if someone is able to make the content of a book, then it's not a big deal to make an index page.
But that's true, it's more complicated than it is now.

A solution could be to let the user choice between a simple horizontal index (default) or a fullscreen index (new baker parameter that you can set in the book.json).

folletto · 2013-01-16T13:01:36Z

I mean for the author, yes. The reason everyone is using Baker is also because we do a very hard work in making the things as simple as possible, so every single item that an author has to consider to write a book must be weighted very, very, very well. :)

benoitchantre · 2013-01-16T13:25:43Z

I understand.
Thanks for everything.

folletto · 2013-01-16T13:33:42Z

Just to be clear: we keep this issue open because we feel it is a problem that needs to be addressed, it's just that we haven't figured out how, so we're open to suggestion... let's try to find simple ones. :)

benoitchantre · 2013-06-14T13:03:01Z

When you set width=device-width in the viewport tag, the index size is calculated for this value.
The issue is that when you change the orientation, those values are kept.

We cannot use media queries because the size of the index is always the same.

Could it be possible to initialize the size of the index for both orientations when we use width=device-width in the viewport tag?

If you don't set the width attribute in the viewport tag, the size of the index doesn't take care of percentage values.
For example, an index with a wrapper that has a width of 100% isn't stretched to fit the device width.

folletto · 2013-06-14T19:55:27Z

The reason is simple - and that's also the cause of the issue: the index picks up the size from the HTML, so first the HTML is there, then the box is sized. That's why media queries don't work.

And that's also why if you specify a fixed size in book.json (de facto avoiding the auto-sizing of the index) the media queries can work.

This is the catch-22 here: by having currently the feature of the dynamic sizing, you lose the media queries. If we take away the dynamic sizing, you can use the media queries... except that however it will require a manual setup of the index for every orientation and device size, raising the complexity.

Apart from this explanation of why it's not working, I can't add much before work is started on this issue. :)

benoitchantre · 2013-08-16T09:36:25Z

@folletto Would it be a good idea to add an extended property named -baker-index-fullscreen?
With this property set to true, the index page would be sized according to pageWidth and pageHeight instead of being calculated from the content size.

folletto · 2013-08-16T09:41:32Z

What are you referring with pageWidth and pageHeight? What would that flag do? Force the index to be always full-screen?

benoitchantre · 2013-08-16T09:47:17Z

The container of the index page would be always full-screen, like the content of the book. That would allow us to use media queries.

Right now, the container of the index is sized from the values in book.json or calculated from the content size. This behaviour is good for a simple index (horizontal or vertical with scroll), but it prevent us to use media queries because the size of the index don't change after a rotation of the device.

This property would be an alternative to make a more sophisticated index with media-queries.

folletto · 2013-08-16T10:01:56Z

Yes that's the issue, and that's an option we were evaluating, but we need to find then a way to do it properly, because if the page is full-screen, it means that we need to find a way to close it. Right now you just touch outside, but if it's full screen there's no "outside" to touch, thus making it difficult.

But yes, it's an option. :)

benoitchantre · 2013-08-16T10:08:59Z

Right now, if you double-tap on the index it closes itself, even if you double-tap on a link.
With the feature request #350, we will be able to add a close button in the html and to place it where we want, or maybe close it with a gesture.

benoitchantre · 2013-08-16T16:11:40Z

@folletto Would you try that?

folletto · 2013-08-16T16:21:03Z

As I said above it's one of the solutions, but we are still evaluating the alternatives. ;)
We'll test however your pull request since it's incredibly more valuable to test it on a live prototype. Thanks for that. :)

benoitchantre · 2013-08-16T16:26:09Z

No problem. If you find a better solution and do not merge mine, I would not cry.

benoitchantre mentioned this issue Jan 15, 2013

index position for landscape orientation iOS 5.1 #587

Closed

benoitchantre mentioned this issue Jun 20, 2013

Navigation bar: wrong positioning #961

Closed

benoitchantre mentioned this issue Dec 2, 2013

Fix media queries issue for the index / add fullscreen capability bakerframework/baker#31

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

media queries not working in index #637

media queries not working in index #637

benoitchantre commented Jan 15, 2013

anjimi commented Jan 16, 2013

anjimi commented Jan 16, 2013

benoitchantre commented Jan 16, 2013

folletto commented Jan 16, 2013

benoitchantre commented Jan 16, 2013

folletto commented Jan 16, 2013

benoitchantre commented Jan 16, 2013

folletto commented Jan 16, 2013

benoitchantre commented Jan 16, 2013

folletto commented Jan 16, 2013

benoitchantre commented Jun 14, 2013

folletto commented Jun 14, 2013

benoitchantre commented Aug 16, 2013

folletto commented Aug 16, 2013

benoitchantre commented Aug 16, 2013

folletto commented Aug 16, 2013

benoitchantre commented Aug 16, 2013

benoitchantre commented Aug 16, 2013

folletto commented Aug 16, 2013

benoitchantre commented Aug 16, 2013

media queries not working in index #637

media queries not working in index #637

Comments

benoitchantre commented Jan 15, 2013

anjimi commented Jan 16, 2013

anjimi commented Jan 16, 2013

benoitchantre commented Jan 16, 2013

folletto commented Jan 16, 2013

benoitchantre commented Jan 16, 2013

folletto commented Jan 16, 2013

benoitchantre commented Jan 16, 2013

folletto commented Jan 16, 2013

benoitchantre commented Jan 16, 2013

folletto commented Jan 16, 2013

benoitchantre commented Jun 14, 2013

folletto commented Jun 14, 2013

benoitchantre commented Aug 16, 2013

folletto commented Aug 16, 2013

benoitchantre commented Aug 16, 2013

folletto commented Aug 16, 2013

benoitchantre commented Aug 16, 2013

benoitchantre commented Aug 16, 2013

folletto commented Aug 16, 2013

benoitchantre commented Aug 16, 2013