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

Question

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

我从另一个问题得到的主要想法是调整元素的宽度,如:

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

我也有通常的viewport元标记:

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

这并没有完美地调整它,因为它目前看起来像这样.这是原始的 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规则.这为您提供了极大的灵活性.

资源

Answer 2

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

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

还有:

• http://semantic.gs/
• http://fluidable.com/
• http://960.gs/