发表新帖
发表新帖

How to auto adjust the div size for all mobile / tablet display formats?

后端 未结
关注
9 953
一个人的身影
一个人的身影 2020-12-07 11:36

I have designed a page where four div tags are there in the page. If I test the page in mobile phone (5 inch) it fits the page perfectly, If I test the same pag

相关标签:
9条回答
  • 轻奢々
    2020-12-07 12:13

    Try giving your divs a width of 100%.

    0 讨论(0)
  • 说谎
    2020-12-07 12:19

    Whilst I was looking for my answer for the same question, I found this:

    <img src="img.png" style=max-
width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">

    You can use it inside a tag (iframe or img) the image will adjust based on it's device.

    0 讨论(0)
  • 既然无缘
    2020-12-07 12:22

    I don't have much time and your jsfidle did not work right now.
    But maybe this will help you getting started.

    First of all you should avoid to put css in your html tags. Like align="center".
    Put stuff like that in your css since it is much clearer and won't deprecate that fast.

    If you want to design responsive layouts you should use media queries wich were introduced in css3 and are supported very well by now.

    Example css:

    @media screen and (min-width: 100px) and (max-width: 199px)
{
    .button
    {
        width: 25px;
    }
}

@media screen and (min-width: 200px) and (max-width: 299px)
{
    .button
    {
        width: 50px;
    }
}

    You can use any css you want inside a media query.
    http://www.w3.org/TR/css3-mediaqueries/

    0 讨论(0)
  • 独厮守ぢ
    2020-12-07 12:23

    Simple:

    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />

    Cheers!

    0 讨论(0)
  • 悲&欢浪女
    2020-12-07 12:29

    You question is a bit unclear as to what you want, but judging from your comments, I assume you want each bubble to cover the screen, both vertically and horizontally. In that case, the vertical part is the tricky part.

    As many others have answered, you first need to make sure that you are setting the viewport meta tag to trigger mobile devices to use their "ideal" viewport instead of the emulated "desktop width" viewport. The easiest and most fool proof version of this tag is as follows:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Source: PPK, probably the leading expert on how this stuff works. (See http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf).

    Essentially, the above makes sure that media queries and CSS measurements correspond to the ideal display of a virtual "point" on any given device — instead of shrinking pages to work with non-optimized desktop layouts. You don't need to understand the details of it, but it's important.

    Now that we have a correct (non-faked) mobile viewport to work with, adjusting to the height of the viewport is still a tricky subject. Generally, web pages are fine to expand vertically, but not horizontally. So when you set height: 100% on something, that measurement has to relate to something else. At the topmost level, this is the size of the HTML element. But when the HTML element is taller than the screen (and expands to contain the contents), your measurements in percentages will be screwed up.

    Enter the vh unit: it works like percentages, but works in relation to the viewport, not the containing block. MDN info page here: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

    Using that unit works just like you'd expect:

    .bubble { height: 100vh; } /* be as tall as the viewport height. Done. */

    It works on a lot of browsers (IE9 and up, modern Firefox, Safari, Chrome, Opera etc) but not all (support info here: http://caniuse.com/#search=vh). The downside in the browsers where it does work is that there is a massive bug in iOS6-7 that makes this technique unusable for this very case (details here: https://github.com/scottjehl/Device-Bugs/issues/36). It will be fixed in iOS8 though.

    Depending on the HTML structure of your project, you may get away with using height: 100% on each element that is supposed to be as tall as the screen, as long as the following conditions are met:

    1. The element is a direct child element of <body>.
    2. Both the html and body elements have a 100% height set.

    I have used that technique in the past, but it was long ago and I'm not sure it works on most mobile devices. Try it and see.

    The next choice is to use a JavaScript helper to resize your elements to fit the viewport. Either a polyfill fixing the vh issues or something else altogether. Sadly, not every layout is doable in CSS.

    0 讨论(0)
  • 名媛妹妹
    2020-12-07 12:30

    You can use the viewport height, just set the height of your div to height:100vh;, this will set the height of your div to the height of the viewport of the device, furthermore, if you want it to be exactly as your device screen, set the margin and padding to 0.

    Plus, It will be a good idea to set the viewport meta tag:

    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />

    Please Note that this is relatively new and is not supported in IE8-, take a look at the support list before considering this approach (http://caniuse.com/#search=viewport).

    Hope this helps.

    0 讨论(0)
 看不清?
提交回复
热议问题