reformat простая страница html на iphone

У меня есть html, называемый today.html, и я использую его на своем iphone, и мне нужно увеличить масштаб, чтобы увидеть мои задачи, как я могу правильно сформировать его, чтобы я искал его экран на Iphone и текст является правильный размерreformat простая страница html на iphone

вот мой код

<!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

Взгляните here

Цитата:

Если вы эксперт по CSS, ваша первая мысль будет заключаться в использовании «ручного» типа мультимедиа в вашем коде CSS. Например, если браузер считает себя карманным устройством, этот код скроет все элементы, принадлежащие классу CSS навигации. Это удобно, если вы знаете, что эти элементы удобны, но избыточными и занимают больше места, чем карманным пользователь хочет отказаться:
@media handheld { 
    .navigation { 
     display: none; 
    } 
} 
К сожалению, это не будет работать на iPhone. Зачем? Потому что Apple знает, что iPhone может отображать страницу намного лучше, чем большинство карманных компьютеров. И они не хотели, чтобы iPhone отображал все веб-страницы в «ошарашенном» способе. Таким образом, iPhone смотрит на «экранный» тип мультимедиа, как и ваш браузер для рабочего стола.

Есть ли альтернатива? Да! Можно указать, что набор правил CSS применяется только тогда, когда экран меньше, чем определенное разрешение:
@media only screen and (max-device-width: 480px) { 
    .navigation { 
     display: none; 
    } 
} 

источник

2009-02-23 11:50:16 epatel

Попробуйте установить font-size: 100%; на теле, таким образом браузер, безусловно, будет, начиная с его размер по умолчанию, прежде чем применяя ваши размеры em. В дополнение к этому попробуйте добавить -webkit-text-size-adjust: auto; на свою страницу.

Эта статья входит в много глубины по специфике разработки для мобильных сафари: http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

источник

2009-02-23 11:59:24 roborourke

Вы пробовали настройки окна просмотра, чтобы соответствовать размеру экрана iphone?

<meta name="viewport" content="width=320" />

подробнее см по адресу: constrain-your-viewport-for-iphone-web-development
Также см developer.apple.com других факторов, касающихся iPhone веб-разработки (например, изменить размер шрифта для читаемости)

источник

2009-02-23 12:04:47 Dror

Ive убирали свой 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

Выбранный ответ для 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

reformat простая страница html на iphone

ответ

Смежные вопросы