Как задать Css медиа запросы только для iphone?

Question

[ArtJH]

Как задать Css медиа запросы только для iphone?

Comments

[Дмитрий Гоголенко]

webupblog.ru/css-media-zaprosy-dlya-ipad-i-iphone-...

[Ankhena]

Расскажите-ка сначала зачем.

[ArtJH]

Ankhena, на айфонах по-другому работает 100vh. Он словно не видит навигационную панель встроенная в браузер и она перекрывает мой контент. Вот хотел для айфонах написать calc(100vh - 60px)
60px - это примерная высота навигационной панели

[Ankhena]

ArtJH, почитайте https://css-tricks.com/the-trick-to-viewport-units...

[ArtJH]

Ankhena, читал уже, в некоторых местах помогло, а вот в некоторых нет. Там не подходит

Answer 1

[Кирилл Никитин]

Если прямо нету возможности сделать более универсальную вёрстку и всё вот так вот серьёзно, то я бы, пожалуй, подключал бы к странице отдельный css-файл по юзерагенту например. Что-то вроде этого:

Общий css-файл:

.class {height: 100vh;}

Файл стилей для iPhone:

.class {height: calc(100vh - 60px);}

jQuery скрипт на страницах:

var device = navigator.userAgent.toLowerCase();
var apple = device.match(/iphone|ipad|ipod/);

if (apple) {
    $( "head" ).append( '<link type="text/css" rel="stylesheet" href="apple.css">' );

    // Или если нужен только один класс без файла

    $( "head" ).append( '<style>.class {height: calc(100vh - 60px);}</style>' );
}