Как задать @media ТОЛЬКО для 7 iphone и Ipad pro?

Question

[Матвей Томилов]

Нужно что бы

@media (max-width: 670px{
	.menu 
	{
	height: 4px;
}}

Работало только на разрешении меньше 670 и на айпаде/айфоне

Answer 1

[D3lphi]

Проверяем js'ом юзер агент. Ищем в нем ключевые слова (iPhone, iPad). Затем, так же, с помощью js, добавляем соответствующие стили.

var ua = navigator.userAgent;
if (ua.search(/iPhone/)) {
    document.querySelector('style').textContent += "@media (max-width: 670px{.menu {height: 4px;}}"; // Как вариант, дополнить содержимое тэга style.
}