0

我有一个响应式网站。我已经有了...

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

...在标题中。该网站不只是自动缩小所有内容以适应智能手机屏幕。它保持我的 DIV 的适当大小(无论是固定的还是百分比的),我设计我的元素以适应相应的大小。

但是,在一页上,我有一个包含多个元素的交互式图表。这些是块(里面有文本),它们必须保持固定的宽度。问题是,这些固定宽度比智能手机屏幕大得多。它的宽度约为 1000 像素。

我不能基于这个 div 百分比。它必须至少为 1000 像素宽,并在每台设备上保持该尺寸。显然,这意味着它不适合智能手机屏幕。

我想做的是继续使用......

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

...对于我网站中的所有其他元素,除了这个 DIV。我需要缩放整个父 DIV、其子 DIV 和子 DIV 内的文本。

我已经尝试过 CSS“缩放”属性。但是,它不能正确缩放文本,并且子 DIV 的宽度似乎没有“缩放”相同。他们失去了对齐。

我如何有条件地将元视口标签应用于除此特定的固定宽度 DIV 之外的所有内容?

4

2 回答 2

1

您需要编写一个 css 媒体查询,在其中分页以调整 div 及其嵌套元素

这是一个 css3 媒体查询模板 gist,您可以使用https://gist.github.com/marcobarbosa/798569

或者更好的是,我会使用引导程序的响应式网格http://getbootstrap.com/2.3.2/

于 2013-09-11T19:06:09.150 回答
0

免责声明:我不确定这就是你要找的东西,而且我没有足够的代表在评论中要求澄清,所以这里有一种可能性......

<meta name="viewport" content="width=1000" />

...其中“1000”px 是您要包含的 div 的固定宽度。通过省略“initial-scale”属性,设备应该计算出它需要为自己申请的缩放。

于 2013-09-26T13:55:02.500 回答