Установите минимальную ширину 320 пикселей на Mac OSX

Question

Можно ли установить минимальную ширину для окна OSX равной 320px?

Минимальная ширина по умолчанию в Safari больше этой, что затрудняет программирование медиазапросов и репликацию в OSX. Пожалуйста, смотрите мой скриншот, который прояснит ситуацию.

Кстати, если вы собираетесь публиковать подробные ответы (я предполагаю, что кто-то ответит), пожалуйста, имейте в виду, что у меня нет опыта работы с бэкэнд-кодом, больше всего я знаю CSS / PHP / JS. Я не против запачкать руки, но инструкции должны быть многословными: -)

Answer 1

Взято из Эта ссылка - работало для меня как в Chrome, так и в Safari на OS X

var location = 'http://www.my-app-address.com'
javascript:open(location,'iPhone:portrait','innerWidth='+(320+15)+',innerHeight='+(480+15)+',scrollbars=yes');

и для ландшафта:

javascript:open(location,'iPhone:landscape','innerWidth='+(480+15)+',innerHeight='+(320+15)+',scrollbars=yes');

Answer 2

Я создал расширение Chrome, OSX Resizer , которое создает всплывающее окно текущего окна размером 320 пикселей.

По сути то же самое, что решение Рубинша, но без кода.

Расширение Resizer, которое упоминает drummin, не предоставляет мне такое поведение.

Answer 3

В Safari вы можете установить расширение под названием «Resizer», и у вас есть возможность добавить нестандартные размеры.

Самое смешное, что если вы измените размер окна с помощью Resizer, его можно вручную изменить до любого размера. Это почти как использование Resizer открывает окно.

Answer 4

Если ваша цель - посмотреть, как сайты будут выглядеть на iPhone, вы всегда можете бесплатно скачать Xcode в Mac App Store, который включает в себя iOS Simulator.

В качестве альтернативы, если у вас есть iPhone (я полагаю, у вас есть, если вы разрабатываете сайты для него), iOS 6 включает в себя функцию удаленной отладки , которая позволяет вам использовать Web Inspector на вашем Mac для проверки и отредактируйте сайт, загруженный на ваш iPhone.

Answer 5

Теперь это можно эмулировать с помощью Chrome Dev Tools.

Откройте Инспектор, щелкните шестеренку справа внизу и перейдите на вкладку «Переопределения».

Вы даже можете подделать своего пользователяагент:)