Существует ли способ протестировать веб-сайт по iPhone без iPhone?

Основная проблема в том, что ваш элемент .content не имеет закрывающего div.

<div class="content">What is your reaction to receiving criticism?<div>

Другая проблема заключается в том, что width: 100vh не дает полной ширины, которую вы ожидаете.

.container {
   height: 100vh;
   width: 100vh;
   display: grid;
       ...
       ...
}

Вы используете высоту области просмотра единиц для ширины. Я думаю, что вы хотели vw.

Но, в конце концов, вам это не нужно, поскольку блочные элементы по умолчанию занимают всю ширину.

Кроме того, если вам нужна полная ширина, вам не нужны значения end.

.footer {
    background-color: #000000;
    grid-area: f;
    justify-self: end;
    align-self: end;
 }

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: 2fr 9fr 1fr;
  grid-template-areas: "h h h" 
                       "c c c"
                       "f f f";
}

.header {
  grid-area: h;
  background-color: #000000;  
}

.content {
  grid-area: c;
  background-color: #ffff00;  
}

.footer {
  grid-area: f;
  background-color: #000000;  
}

body {
  margin: 0;
}
<div class="container">
  <div class="header">
    <div>
      <a href="index.asp">
        <img src="images/title-img-640.png" class="logo" alt="Play to Evolve" title="Play to Evolve">
      </a>
    </div>
  </div>
  <div class="content">
    What is your reaction to receiving criticism?
  </div>
  <div class="footer">
    <div class="textFooterSmall">
      Copyright 2019 ClearSay.net<br>
    </div>
    <div></div>
    <div class="textFooterSmall">
      design by <a class="footerlinkSmall" href="http://www.OceanMedia.net" target="_blank">OceanMedia.net</a><br>
      <a class="footerlinkSmall" href="admin_menu.asp">admin</a>
    </div>
  </div>
</div>

9
задан Jeff Atwood 7 February 2009 в 05:57
поделиться

4 ответа

При владении Mac можно загрузить iPhone SDK, который идет со средством моделирования iPhone. Это работает не только на отладку исходного приложения, но также и на просмотр веб-сайтов.

12
ответ дан 4 December 2019 в 08:02
поделиться

Я не подразумеваю сделать больше, чем веб-поиск, но проблема, кажется, решен несколькими продуктами, которые являются "эмуляторами веб-приложения iPhone".

http://www.testiphone.com/

http://marketcircle.com/iphoney/

1
ответ дан 4 December 2019 в 08:02
поделиться

Существует бесплатное приложение на Mac, который эмулирует браузер iPhone: iPhoney

2
ответ дан 4 December 2019 в 08:02
поделиться

Если у Вас есть Safari на Вашем компьютере, можно включить меню "Develop" под Предпочтениями> Усовершенствованный>, Шоу Разрабатывает Меню в Строке меню.

С этим включил, можно пойти, чтобы Разработать> Агент пользователя и изменить строку агента пользователя на устройство, о котором Вы хотите, чтобы Ваш браузер сообщил веб-серверу как. Путем изменения размеров окна к соответствующей ширине можно эмулировать то, на что сайт будет похож на iPhone.

Позитивный аспект этого - то, что это быстро, это работает и над Windows и над Mac, и Вам не нужен установленный iPhone SDK. Можно также просмотреть определенные для iPhone версии веб-сайтов, которые ловят строки агента пользователя непосредственно от ПК.

Оборотная сторона является, очевидно, Вашим браузером Safari на Вашем ПК, будет вести себя более быстрый, чем на существующем устройстве (особенно в отношении производительности JavaScript); это отображает плагины и показывает шрифты, которые не могут быть доступными на фактической iPhone OS; отсутствие мультисенсорной поддержки и "привязывающийся" к столбцам при прокрутке; никакая авторотация; никакой multi-touch/pinch-zoom; виджеты будут выглядеть по-другому; и т.д.

9
ответ дан 4 December 2019 в 08:02
поделиться
Другие вопросы по тегам:

Похожие вопросы: