iphone - 可以调整在 iphone 上查看的任何 HTML 大小的 CSS 或 Javascript

Question

我正在尝试提出一些 CSS 或 Javascript 可以自动调整在 iPhone 浏览器(UIWebview 组件)中查看的任何 HTML 的大小，以便内容适合视口(viewport)和图像/文本全部调整大小。 (与实现缩小不同)。

我从another question得到的主要思想是调整元素的宽度，比如:

@media screen and (max-width: 480px){
    *{
    max-width: 320px;
    }
}

我还有常用的视口(viewport)元标记:

<meta name="viewport" content ="width=device-width">

这并没有完美地调整它的大小，因为它看起来像 this currently .这是 original HTML。

我想知道我还能做些什么来实现这个目标？我不想只为这个 HTML 而为其他 HTML 页面做正确的事。

也许为此已经存在一个 jQuery 插件？

我不想只为这个页面做正确的事情，我想要一些更通用的东西用于任何 HTML 页面。

Answer 1

您可以像这样将不同的样式表链接到不同的媒体:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

通过这种方式，您可以为各种屏幕尺寸等创建不同的 CSS 规则。这为您提供了极大的灵 active 。

Source