Html 如何自动调整所有手机/平板显示格式的 div 大小？

Question

提问by Vinod

I have designed a page where four divtags 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 page in tablet the page fits with in 30% of the screen. So how can I set the divsize so that it will fit for all type of screens.

我设计了一个页面，页面中有四个div标签。如果我在手机（5 英寸）上测试页面，它完全适合页面，如果我在平板电脑上测试同一页面，页面适合屏幕的 30%。那么我如何设置div大小以使其适合所有类型的屏幕。

Fiddle link

小提琴链接

HTML:

HTML：

  <div class="bubble0" align="center">
     <h3>Three  Levels </h3> 
  </div>
  <div class="bubble"  align="center"> </div><br/><br/>
  <div class="bubble1" align="center"> </div><br/><br/>
  <div class="bubble2" align="center"> </div><br/><br/>
  <button>Play</button>

Any suggestions please,

任何建议，请

Answer 1

回答by Mike Phils

This is called Responsive Web Development(RWD). To make page responsive to all device we need to use some basic fundamental such as:-

这称为响应式 Web 开发 (RWD)。为了使页面响应所有设备，我们需要使用一些基本的基础知识，例如：-

1. Set the viewport meta tag in head:

1.在head中设置viewport meta标签：

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

2.Use media queries.

2.使用媒体查询。

Example:-

例子：-

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

3. Or we can directly use RWD framework:-

3. 或者我们可以直接使用RWD 框架：-

Some of good Article

一些不错的文章

Media Queries for Standard Devices - BY CHRIS COYIER

标准设备的媒体查询 - 作者：CHRIS COYIER

CSS Media Dimensions

CSS 媒体尺寸

4. Larger Device, Medium Devices & Small Devices media queries. (Work in my Scenarios.)

4. 大型设备、中型设备和小型设备媒体查询。（在我的场景中工作。）

Below media queries for generic Device type: - Larger Device, Medium Devices & Small Devices. This is just basic media types which work for all of scenario & easy to handle code instead of using various media queries just need to care of three media type.

在通用设备类型的媒体查询下方： - 大型设备、中型设备和小型设备。这只是基本的媒体类型，适用于所有场景并且易于处理代码，而不是使用各种媒体查询只需要关心三种媒体类型。

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}

Answer 2

回答by Emil

You question is a bit unclear as to what you want, but judging from your comments, I assume you want eachbubble 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).

资料来源：PPK，可能是了解这些东西如何工作的领先专家。（参见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.

本质上，上述内容确保媒体查询和 CSS 测量对应于任何给定设备上虚拟“点”的理想显示 - 而不是缩小页面以使用非优化的桌面布局。你不需要了解它的细节，但这很重要。

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.

现在我们有了一个正确的（非伪造的）移动视口，调整视口的高度仍然是一个棘手的问题。通常，网页可以垂直扩展，但不能水平扩展。因此，当您开始height: 100%做某事时，该衡量标准必须与其他事情相关联。在最顶层，这是 HTML 元素的大小。但是当 HTML 元素高于屏幕（并扩展以包含内容）时，您的百分比测量将被搞砸。

Enter the vhunit: 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

输入vh单位：它像百分比一样工作，但与视口相关，而不是包含块。此处的 MDN 信息页面：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.

它适用于许多浏览器（IE9 及更高版本、现代 Firefox、Safari、Chrome、Opera 等），但不是全部（支持信息在这里：http: //caniuse.com/#search=vh）。它工作的浏览器的缺点是 iOS6-7 中有一个巨大的错误，这使得这种技术在这种情况下无法使用（详情请见：https: //github.com/scottjehl/Device-Bugs/issues/36）。不过它会在 iOS8 中修复。

Depending on the HTML structure of your project, you mayget 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:

根据项目的 HTML 结构，只要满足以下条件，您就可以避免height: 100%在每个应该与屏幕一样高的元素上使用：

The element is a direct child element of <body>.
Both the htmland bodyelements have a 100% height set.

该元素是的直接子元素<body>。
两个html和body元素有100％的高度集。

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 vhissues or something else altogether. Sadly, not every layout is doable in CSS.

下一个选择是使用 JavaScript 助手来调整元素的大小以适应视口。要么是修复vh问题的 polyfill，要么是其他的东西。遗憾的是，并非所有布局都可以在 CSS 中使用。

Answer 3

回答by Karim AG

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.

您可以使用视口高度，只需将您的 div 高度设置为height:100vh;，这会将您的 div 高度设置为设备视口的高度，此外，如果您希望它与您的设备屏幕完全相同，请设置边距和填充为 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).

请注意，这是相对较新的，在 IE8 中不受支持，在考虑这种方法之前先查看支持列表 ( http://caniuse.com/#search=viewport)。

Hope this helps.

希望这可以帮助。

Answer 4

回答by Noel Widmer

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

我没有太多时间，您的 jsfidle 现在无法正常工作。
但也许这会帮助你开始。

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.

首先，您应该避免将 css 放在 html 标签中。喜欢align="center"。
把这样的东西放在你的 css 中，因为它更清晰，不会那么快弃用。

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

如果你想设计响应式布局，你应该使用css3 中引入的媒体查询，现在已经得到很好的支持。

Example css:

示例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/

您可以在媒体查询中使用您想要的任何 css。
http://www.w3.org/TR/css3-mediaqueries/

Answer 5

回答by Sergio Pereyra Ortega

I use something like this in my document.ready

我在我的 document.ready 中使用了这样的东西

var height = $(window).height();//gets height from device
var width = $(window).width(); //gets width from device

$("#container").width(width+"px");
$("#container").height(height+"px");

Answer 6

回答by Sudheer

Fiddle

小提琴

You want to set height which may set for all devices?

您想设置可以为所有设备设置的高度吗？

Decide upon the design of the site i.e Height on various devices.

决定网站的设计，即各种设备上的高度。

Ex:

前任：

Height-100pxfor bubbles on device with -min-width: 700px.
Height-50pxfor bubbles on device with < 700px;

Height-100px用于设备上的气泡-min-width: 700px。
Height-50px用于设备上的气泡< 700px；

Have your css which has height 50px;

拥有高度为 50px 的 css；

and add this media query

并添加此媒体查询

  @media only screen and (min-width: 700px) {
    /* Styles */
    .bubble {
        height: 100px;
        margin: 20px;
    }
    .bubble:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble1 {
        height: 100px;
        margin: 20px;
    }
    .bubble1:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble1:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble2 {
        height: 100px;
        margin: 20px;
    }
    .bubble2:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble2:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
}

This will make your bubbles have Height of 100px on devices greater than 700px and a margin of 20px;

这将使您的气泡在大于 700 像素的设备上具有 100 像素的高度和 20 像素的边距；

Answer 7

回答by Xiaxia Quiambao

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.

您可以在标签（iframe 或 img）中使用它，图像将根据其设备进行调整。

Answer 8

回答by Farhad

Simple:

简单的：

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

Cheers!

干杯!

Answer 9

回答by Mohammad Areeb Siddiqui

Try giving your divs a width of 100%.

尝试为您的 div 设置100%.

Html 如何自动调整所有手机/平板显示格式的 div 大小？

提问by Vinod

回答by Mike Phils

回答by Emil

回答by Karim AG

回答by Noel Widmer

回答by Sergio Pereyra Ortega

回答by Sudheer

Fiddle

小提琴

回答by Xiaxia Quiambao

回答by Farhad

回答by Mohammad Areeb Siddiqui

相关推荐

最近更新

标签

Html 如何自动调整所有手机/平板显示格式的 div 大小？

提问by Vinod

回答by Mike Phils

回答by Emil

回答by Karim AG

回答by Noel Widmer

回答by Sergio Pereyra Ortega

回答by Sudheer

Fiddle

小提琴

回答by Xiaxia Quiambao

回答by Farhad

回答by Mohammad Areeb Siddiqui

相关推荐

如何在 HTML 中创建可扩展的常见问题解答页面？

Html .mp4 文件不在 Chrome 中播放

Html 如何删除两个div元素之间的空间

HTML 默认链接颜色

相关推荐

最近更新

标签