14

我正在尝试提出一些 CSS 或 Javascript，它们可以自动调整在 iPhone 浏览器（UIWebview 组件）中查看的任何HTML 的大小，以使内容适合视口并且图像/文本都调整大小。（与实现缩小不同）。

我从另一个问题中得到的主要想法是调整元素的宽度，例如：

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

我也有通常的视口元标记：

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

这并不能完美地调整它的大小，因为它目前看起来像这样。这是原始的HTML。

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

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

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

4

8 回答 8

8

您可以将不同的样式表链接到不同的媒体，如下所示：

<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 规则。这为您提供了极大的灵活性。

资源

于 2012-05-25T11:51:14.970 回答
5

网格系统将提供很多灵活性。大多数缩放图像和文本（如果需要），并转换为流畅的移动布局。

我更喜欢 1140 CSS Grid http://cssgrid.net/

还有：

于 2012-05-27T17:22:42.130 回答
3

我想你不能在 html- 或 body-element 上使用 max-width 。它适用于：

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

（需要进一步更改#logo）

于 2012-05-25T11:12:16.897 回答
2

请注意：

<meta name="viewport" ...

iOS 设备上似乎存在错误。

另外，看看Twitter Responsive Bootstrap用于开发响应式网站，以及 responsive.is 用于测试。

于 2012-06-02T11:16:25.077 回答
1

在 html 页面的 head 标签顶部使用以下元标签：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=0.83; maximum-scale=0.83; minimum-scale=0.83; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

您可以根据需要更改initial-scaleandmaximum-scale以适应内容。

于 2012-06-02T09:56:15.017 回答
0 
@media only screen and (max-width: 999px) {
  /* rules that only apply for canvases narrower than 1000px */
}

@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* rules for iPad in landscape orientation */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* iPhone, Android rules here */
}

这些可能看起来是专有的，但实际上这些是在 Firefox、Safari（包括 Mobile）和 Google Chrome 中实现的 CSS3 媒体查询。

之后，创建三个不同的布局。1.widths up to 480px (iPhone, Android)：紧凑的间距，单列；2.高达980px（iPad纵向）：流体列仅在顶部，其他地方为单列；3.wider than 980px：固定的，两列居中布局。

您可能还想为每种不同的样式调整字体大小，以使其完美地适合目标设备。

此外，如果您的目标是 iOS 平台，请确保您的布局自动填充 iDevice 的显示。在移动 webkits 中，你可能想使用这个：

<meta name="viewport" content="initial-scale=1.0">

这是因为即使布局本身更窄，移动 Safari 也会显示缩小的 980 像素宽的页面版本。您可以在此处阅读更多这些规范：https ://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

您应该知道，方向媒体查询虽然在 iPad 上受支持，但在 iPhone 上不起作用。幸运的是，像 width 和 device-width 这样的尺寸查询可以工作，所以布局切换可以在没有 JavaScript 的情况下通过它们的某种组合来实现。

此外，随着 Retina 显示设备的出现，您可能希望专门针对它们提供高分辨率图形。您可以查看详细信息：https ://webkit.org/blog/55/high-dpi-web-sites/

最后，对于 Retina 设备，您可以使用这个：

<link rel="stylesheet" media="only screen and -webkit-min-device-pixel-ratio: 2" href="highres.css">
于 2012-05-31T08:54:48.507 回答
0

对于初学者来说，这是一个很好的参考“标准设备的媒体查询” http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

以下样式对您有用吗？

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

当应用 320px 的最大宽度时，框大小将考虑填充。所以它不会在 320px 上添加任何填充（默认情况下会这样做）。

试试看，祝你好运。

于 2012-06-01T19:40:26.217 回答
-1

将您的包装器或主体元素设置为width: 100%; overflow:hidden;. 所有子元素都有一个max-width: 100%. 现在使用此工具将所有像素转换为参考其父母的百分比：http ://rwdcalc.com/它对我帮助很大！

于 2012-05-29T12:32:26.607 回答