如何让 iPhone 大小的网页以正确的尺寸显示？

发布于 2024-09-08 23:39:21 字数 2623 浏览 2 评论 0原文

我正在为网站创建多个页面的 iphone 版本，并使用 javascript 文件重定向到正确的页面：

<script type="text/javascript">// <![CDATA[
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
location.replace("index2.html");
// ]]></script>

页面加载正常，但在屏幕上很小。

我需要做什么才能让它填满 iPhone 的屏幕？

这是 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Advantage Total Agency Management" />
<meta name="keywords" content="Advantage" />
<meta name="author" content="Advantage" />

<link rel="stylesheet" type="text/css" media="screen" href="_css/mobile.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Mobile Home | Go To Advantage</title>
</head>
<body id="home">
<div id="header">
    <a href="/"><img src="_images/logo.png" alt="Advantage Software" /></a>
    <ul>
        <li><a class="home" href="index.html">home</a></li>
        <li><a class="services" href="services.html">services</a></li>
        <li><a class="contact" href="contact.html">contact</a></li>
    </ul>
</div>
<div id="intro">
    <img src="_images/quote.png" alt="We work the way you work" />
    <p>Advantage is integrated software for Advertising, Marketing, Public Relations, Media Buying and related organizations that is robust, flexible, browser-based, and mobile.</p>
</div>
<div id="text">
    <p>Our software products meet the needs of mid to large-size agencies but also smaller agencies with a streamlined and efficient design. Our role-based methodology ensures that every individual in the agency benefits from the software. Our Advantage suite of agency software products streamline agency workflow and internal processes.</p>
</div>
<div id="footer">
    <ul>
        <li><a class="call">call</a></li>
        <li><a class="email">email</a></li>
        <li><a class="demo">demo</a></li>
    </ul>
</div>
</body>
</html>

原文

I am creating an iphone version of several pages for a website and I am using a javascript file to redirect to the correct page:

<script type="text/javascript">// <![CDATA[
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
location.replace("index2.html");
// ]]></script>

The page loads fine, but it is very small on the screen.

What do I need to do to get it to fill the screen of the iPhone?

Here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Advantage Total Agency Management" />
<meta name="keywords" content="Advantage" />
<meta name="author" content="Advantage" />

<link rel="stylesheet" type="text/css" media="screen" href="_css/mobile.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Mobile Home | Go To Advantage</title>
</head>
<body id="home">
<div id="header">
    <a href="/"><img src="_images/logo.png" alt="Advantage Software" /></a>
    <ul>
        <li><a class="home" href="index.html">home</a></li>
        <li><a class="services" href="services.html">services</a></li>
        <li><a class="contact" href="contact.html">contact</a></li>
    </ul>
</div>
<div id="intro">
    <img src="_images/quote.png" alt="We work the way you work" />
    <p>Advantage is integrated software for Advertising, Marketing, Public Relations, Media Buying and related organizations that is robust, flexible, browser-based, and mobile.</p>
</div>
<div id="text">
    <p>Our software products meet the needs of mid to large-size agencies but also smaller agencies with a streamlined and efficient design. Our role-based methodology ensures that every individual in the agency benefits from the software. Our Advantage suite of agency software products streamline agency workflow and internal processes.</p>
</div>
<div id="footer">
    <ul>
        <li><a class="call">call</a></li>
        <li><a class="email">email</a></li>
        <li><a class="demo">demo</a></li>
    </ul>
</div>
</body>
</html>

分享到QQ

分享到微博