通过PC使用时，将中心对齐到jqm4gwt的JQMPage

Question

I would like to create a application, which can be used by either PC or mobile.

If the application is used by PC, the screen is too wide, so, I would like to set max-width to the application and align center the JQMPage in PC mode.

If it is used by mobile, it is not need width=device-width.

Now I set the style to JQMPage div, max-width it is work, but I can't align center. How should I do?

There is a way for setting max-width and align center in PC mode only ??

Answer 1

jQM pages are absolutely positioned, so you can center them like this:

div[data-role=page] {
    max-width: 600px; /* choose appropriate max-width */
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

If you prefer, you can put this rule within a media query that only takes effect when the screen is wide (then you could add border/shadow etc.):

@media all and (min-width: 600px) {
    div[data-role=page] {
        max-width: 600px;
        left:0;
        right:0;
        margin-left:auto;
        margin-right:auto;
        border: 1px solid #ccc !important;
        -moz-box-shadow:    2px 2px 12px 2px rgba(100,100,100,0.3);
        -webkit-box-shadow: 2px 2px 12px 2px rgba(100,100,100,0.3);
        box-shadow:         2px 2px 12px 2px rgba(100,100,100,0.3);
    }
}

Here is a DEMO

NOTE: in my example I have used 600px as the max-width. You should tweak this to the actual value that works for your project.

Answer 2

我认为您想开发自适应网站k ...即使在我的项目中，我也面临着同样的问题，在这里我尝试了这一功能，对我来说很好