1. 首頁
  2. 問答
  3. 重新格式化iPhone上的一個簡單的HTML頁面

重新格式化iPhone上的一個簡單的HTML頁面

2009-02-23 62 views
4

我有一個名爲today.html的html，我在我的iphone上使用它，我必須放大以查看我的任務如何使它正確合成，以便它繞過屏幕上的iPhone和文本大小合適重新格式化iPhone上的一個簡單的HTML頁面

這裏是我的代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Tasks for today</title> 
    <meta name="generator" content="TextMate http://macromates.com/"> 
    <meta name="author" content="sebastian stephenson"> 
<style type="text/css" media="screen"> 
    body { 
     border: medium dashed #7979ff; 
     background-color: #fff; 
     margin: 0 auto; 
    } 

    body p{ 
     font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
     padding-left: 10px; 
    } 

    .todos { 
     font: 1em"Lucida Grande", Lucida, Verdana, sans-serif; 
     color: #7D1518; 
     padding-left: 20px; 
    } 
    .todos p{ 
     font: 1em Arial; 
    } 
</style> 
<!-- Date: 2008-08-24 --> 
</head> 

<body> 
<p>a greeting</p> 
<div class="todos"> 

<li>a task</li> 

<li>a task with detail</li> 
<p>detail</p> 
<li>a task with muilple acitons</li> 


<ul> 

<li>an action</li> 

<li>an action</li> 

<li>an action</li> 

<li>an action</li> 

<li>an action</li> 

<li>an action</li> 

<li>an action</li> 



</ul> 


</div> 
</body> 
</html>

感謝

來源

2009-02-23 sebey

回答

1

看一看here

報價：

如果你是一位CSS專家，你首先想到的是在你的CSS代碼中使用「手持」媒體類型。例如，如果瀏覽器認爲自己是手持設備，則此代碼將隱藏屬於導航CSS類的所有元素。

@media handheld { 
    .navigation { 
     display: none; 
    } 
}

不幸的是這不會在iPhone上工作：如果你知道這些元素是方便，但多餘的，比手持用戶想要放棄佔用更多的空間很方便。爲什麼？因爲蘋果知道iPhone可以顯示比大多數手持設備更好的頁面。而且他們不希望iPhone以「虛弱」的方式顯示所有網頁。因此，iPhone就像桌面瀏覽器一樣查看「屏幕」媒體類型。

是否有替代方案？是!您可以指定一組CSS規則只適用於當屏幕大於一定分辨率較小：

@media only screen and (max-device-width: 480px) { 
    .navigation { 
     display: none; 
    } 
}

來源

2009-02-23 11:50:16 epatel

0

伊夫清理你的HTML一點，通過將LI在UL內部並擺脫冗餘的div。

您可以在任何塊級元素上設置最大寬度，所以將其與@ epatel的媒體聲明結合起來可以得到以下結果。

玩弄寬度等。我只是隨機設置它們。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Tasks for today</title> 
    <meta name="generator" content="TextMate http://macromates.com/"> 
    <meta name="author" content="sebastian stephenson"> 
<style type="text/css" media="screen"> 


    body { 
     border: medium dashed #7979ff; 
     background-color: #fff; 
     margin: 0 auto; 
    } 

    body p{ 
     font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
     padding-left: 5px; 
    } 

    .todos { 
     font: 1em"Lucida Grande", Lucida, Verdana, sans-serif; 
     color: #7D1518; 
     padding-left: 20px; 
    } 
    .todos p{ 
     font: 1em Arial; 
    } 
    ul { 
     max-width:200px; 
    } 

    @media only screen and (max-device-width: 480px) { 
     ul { 
      max-width:480px; 
     } 
    } 
    @media only screen and (max-device-width: 240px) { 
     ul { 
      max-width:240px; 
     } 
    } 


</style> 
<!-- Date: 2008-08-24 --> 
</head> 

<body> 
<p>a greeting</p> 

    <ul class="todos"> 
     <li>a task</li> 

     <li>a task with detail 
      <p>detail</p> 
     </li> 

     <li>a task with muilple acitons 
      <ul> 
       <li>an action</li> 
       <li>an action</li> 
       <li>an action</li> 
       <li>an action</li> 
       <li>an action</li> 
       <li>an action</li> 
       <li>an action</li> 
      </ul> 
     </li> 

    </ul> 

</body> 
</html>

來源

2009-02-23 12:07:15 garrow

0

選擇的答案是iPhone，但測距設備的動態寬度您可以在您的「頭」標記添加這段代碼。
Reference

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

來源

2013-08-26 12:59:30 yunas

相關問題

 相關問題