Media handheld: Почему @media handheld не срабатывает? — Хабр Q&A

@media — CSS | MDN

@media handheld-никаких эффектов наведения — CodeRoad

Для текущего проекта я пытаюсь удалить эффекты наведения курсора на устройствах с сенсорным экраном. Мой план состоит в том , чтобы использовать @media handheld { /* non-hover styles here */ }, вставить сюда все в моем файле css, в котором есть :hover , и просто удалить все эффекты наведения.

Пример:

/* desktop */

a.my_element {
color : #ff0000;
}
a.my_element:hover {
color : #000000;
}

/* handheld devices */

@media handheld {
a.my_element:hover {
}
}

Верна ли моя логика? Сработает ли это?

css

hover

Поделиться

Источник

Malasorte    

12 июля 2014 в 04:08

1 ответ

1

Попробуйте следующее:

HTML

<a href="#"> example </a>

CSS

a.my_element {
color : #ff0000;
}
a.my_element:hover {
color : #000000;
}

/* handheld devices */

@media (max-width: 480px){
    a.my_element:hover {
        color: #ff0000;           
    }
}

Это в значительной степени будет использовать запрос media в 460px, чтобы сделать наведение таким же цветом, как если бы оно не было наведено (в конечном итоге создавая то, что вы хотели бы сделать).

ДЕМО JSFiddle

Поделиться

BuddhistBeast    

12 июля 2014 в 04:15

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

Может хром осмотрите инструмент Диспетчер устройств подобрать запроса media КПК?

Я добавил запрос media handheld к некоторым из моих кодов,но не могу найти способ проверить его. @media handheld{ #small_display{ display:block; } #map1{ display:none; } #map2{ display:none; } } У…

примените состояние наведения курсора к настольной версии (без планшетов и телефонов) только с помощью запросов media

Я подаю состояние парения стиль элемента div, как это: div { &:hover { color: red !important; border: 3px solid red !important; } } Теперь я не хочу применять этот стиль css к iPad и другим…

Никаких эффектов с nivoSlider

Слайдер Nivo работает нормально, но не дает никаких эффектов.

О каких параметрах заботится тип css media «handheld»?

Мне нужно изменить стиль страницы в зависимости от того, является ли это портативное устройство (например, мобильный телефон) или устройство с большим экраном, например ноутбук, стационарный…

Как я могу заставить iPhone Safari использовать media=»handheld»?

Есть ли способ заставить iPhone-е Safari использовать media=handheld вместо media=screen ?

handheld css не работает должным образом

на моем сайте у меня есть 3 css <link rel=stylesheet type=text/css media=screen href=screen.css /> <link rel=stylesheet type=text/css media=print href=print.css /> <link…

Нужно ли указывать CSS для media=»handheld» и использовать CSS media запросов, если я делаю простой мобильный сайт только для iphone, android, blackberry?

Нужно ли указывать CSS для media=handheld и использовать CSS media запросов media=only screen and (max-device-width:xxxpx) , если я делаю простой мобильный сайт только для iphone, android,…

Поддерживают ли iPhone / Android браузеры CSS @media handheld?

Я хочу изменить свою веб-страницу CSS для веб-браузеров, работающих на мобильных телефонах, таких как iPhone и Android. Я пробовал что-то подобное в файле CSS: @media handheld { body { color: red; }…

Могу ли я заставить iOS Safari распознавать запросы handheld media?

Просто и ясно. Как я могу заставить iOS Safari признать это? BUTTON { padding: 0 0.5em; /* To conserve screen space on point-and-click interfaces */ } @media handheld { BUTTON { padding: 1em 2em; /*…

Включает ли media запрос «handheld» таблетки?

Этот вопрос прост: Включает ли media запрос handheld таблетки? Примечание : Я знаю, что есть некоторые устройства, такие как iPhones, которые не используют КПК media.

Могу ли я заставить iOS Safari распознавать запросы handheld media?

Просто и ясно. Как я могу заставить iOS Safari признать это?

BUTTON {
    padding: 0 0.5em; /* To conserve screen space on point-and-click interfaces */
}

@media handheld {
    BUTTON {
        padding: 1em 2em; /* So fingers can more easily touch it */
    }
}

Я уже читал, как я могу заставить iPhone Safari использовать media=»handheld»?, но это было задано более 3 лет назад. В сегодняшнюю эпоху HTML5-и CSS3-соответствия и где стандарты принимаются так легко, я надеюсь, что Apple поместит что-то в iOS Safari, чтобы иметь возможность разрешить выполнение запросов handeld media на экране iPhone now-relatively-tiny.

Я попытался использовать точные значения , такие как screen and (max-width: 5in), но, по-видимому, он думает, что его экран шире 5 дюймов.

ios

css

safari

media-queries

Поделиться

Источник

Ben Leggiero    

14 марта 2013 в 22:38

1 ответ

• Могу ли я использовать браузер OS X Safari для правильного тестирования кода, специфичного для браузера iOS Safari, с помощью запросов media?

  Я не являюсь владельцем каких-либо устройств, iOS, таким образом, все мои разработки веб-кодирование осуществляется на Safari. Я пробовал этот удивительный проект для тестирования , но обнаружил, что он, возможно, ограничен. В частности, я хочу использовать конкретные запросы media в моем основном…

• media запросы интернет explorer

  я пытался использовать media запроса на своих сайтах. он хорошо работает в firefox и safari, но не для IE. кто-нибудь знает, как заставить запросы media хорошо работать в IE(internet explorer 7 и 8). вот код :

1

Вы можете использовать эту цель для определенной ширины устройства.

    @media only screen and (max-device-width: YourDeviceWidth){

       //Styles for this device width here.
    }

Или вы можете использовать device-aspect-ratio для Iphone+Ipad:

iPhone < 5:

        @media screen and (device-aspect-ratio: 2/3) {
        }

iPhone 5:

        @media screen and (device-aspect-ratio: 40/71) {
        }

iPad:

        @media screen and (device-aspect-ratio: 3/4) {
        }

Поделиться

Kyle Needham    

14 марта 2013 в 22:48

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

О каких параметрах заботится тип css media «handheld»?

Мне нужно изменить стиль страницы в зависимости от того, является ли это портативное устройство (например, мобильный телефон) или устройство с большим экраном, например ноутбук, стационарный…

Как я могу заставить iPhone Safari использовать media=»handheld»?

Есть ли способ заставить iPhone-е Safari использовать media=handheld вместо media=screen ?

Media запросы не работают для мобильных устройств IE

Я определил следующие запросы media для загрузки различных файлов .css для мобильных и настольных браузеров: <link rel=stylesheet type=text/css media=screen href=desktop.css /> <link…

Могу ли я использовать браузер OS X Safari для правильного тестирования кода, специфичного для браузера iOS Safari, с помощью запросов media?

Я не являюсь владельцем каких-либо устройств, iOS, таким образом, все мои разработки веб-кодирование осуществляется на Safari. Я пробовал этот удивительный проект для тестирования , но обнаружил,…

media запросы интернет explorer

я пытался использовать media запроса на своих сайтах. он хорошо работает в firefox и safari, но не для IE. кто-нибудь знает, как заставить запросы media хорошо работать в IE(internet explorer 7 и…

Как я могу автоматически воспроизвести media в iOS >= 4.2.1 Mobile Safari?

Кажется, я не могу заставить аудио media воспроизводиться в мобильном телефоне Safari на iOS 4.2.1 в любой ситуации, кроме обработчика события щелчка, выполняемого пользователем. Даже тогда, если…

Поддерживают ли iPhone / Android браузеры CSS @media handheld?

Я хочу изменить свою веб-страницу CSS для веб-браузеров, работающих на мобильных телефонах, таких как iPhone и Android. Я пробовал что-то подобное в файле CSS: @media handheld { body { color: red; }…

@media handheld-никаких эффектов наведения

Для текущего проекта я пытаюсь удалить эффекты наведения курсора на устройствах с сенсорным экраном. Мой план состоит в том , чтобы использовать @media handheld { /* non-hover styles here */ } ,…

Включает ли media запрос «handheld» таблетки?

Этот вопрос прост: Включает ли media запрос handheld таблетки? Примечание : Я знаю, что есть некоторые устройства, такие как iPhones, которые не используют КПК media.

Angular 6, ServiceWorker ios Safari и запросы байтового диапазона Видеоэлементов

ServiceWorker на IOS 12 Safari не работает с видеоэлементом HTML5. Я просто получаю пустой экран, камера устройства не течет в поле зрения. Я использую видеоэлемент для захвата экрана. Он отлично…

Поддерживают ли браузеры iPhone / Android наладонник CSS @media?

Вы можете использовать @media запросы:

Эта конкретная версия будет нацелена на iPhone (и любое другое устройство с экраном max-device-width из 480 пикселей .

Apple, для iPhone, хотя это из памяти, поэтому я не могу быть полностью уверена в ее точности, решила игнорировать использование портативных или мобильных таблиц стилей , поскольку она и другие устройства iOS были способны рендеринг css более или менее наравне с настольными браузерами через Safari.Что касается других устройств, я не уверен, насколько они верны, хотя статья A List Apart (ссылка на которую приведена выше) дает краткий обзор некоторых.

Отредактировано в ответ на комментарий от @Colen:

Хм, похоже, что многие новые мобильные устройства имеют более высокое разрешение (например, droid X — 854×480). Есть ли способ их обнаружить? Я не думаю, что они обрабатываются с помощью этого запроса.

Я не могу сказать наверняка, поскольку у меня нет доступа к этим устройствам, однако в другой статье A List Apart: Отзывчивый веб-дизайн отмечается, что:

К счастью, W3C создал медиа-запросы как часть спецификации CSS3, улучшив обещание медиа-типов.Медиа-запрос позволяет нам ориентироваться не только на определенные классы устройств, но и на самом деле проверять физические характеристики устройства, выполняющего нашу работу. Например, после недавнего развития мобильного WebKit медиазапросы стали популярной клиентской техникой для доставки индивидуализированной таблицы стилей на iPhone, телефоны Android и им подобные.

Итак, я, , предполагаю, , что они, устройства Android, должны быть доступны для таргетинга с помощью @ media-query, но, как уже отмечалось, я не могу сказать с какой-либо уверенностью.

Для целевого разрешения устройства есть пример:

Дополнительная литература: Рекомендация кандидата W3 для медиа-запросов.

CSS Media Types и страницы для печати

CSS Media Types и принтер
дружественные страницы

«Серфить в Интернете» традиционно означало смотреть в компьютер.
Следите, правда все меняется, причем быстро.По мере развития сети
становится более разнообразным, доступным для изобретений даже Альберта Гора
наверное, не мог предсказать. Все мы знакомы с печатью страницы
для просмотра в автономном режиме, хотя теперь существует поддержка веб-страниц
для просмотра на портативных устройствах, проекционных экранах, телевизорах, для людей с
инвалидность и многое другое. Все это замечательно, но это происходит не просто так.
собственный. Мы, веб-мастера, должны приложить сознательные усилия, чтобы добавить этот
поддержка, и одним из интересных способов является использование CSS.В этом уроке я
обсудить типы мультимедиа в CSS и, в частности, как можно использовать CSS для
преобразовать обычные веб-страницы в удобные для печати.

Типы мультимедиа CSS

Медиа — это тип устройства, используемого для отображения веб-страницы, например
экран компьютера. Все больше и больше нетрадиционных устройств, таких как
карманный компьютер, мобильный телефон или даже часы, которым нужен доступ в Интернет,
разработка вашего веб-сайта становится больше, чем просто браузерной игрой.Ты хочешь
чтобы ваша веб-страница хорошо выглядела на нескольких устройствах. К счастью, процесс
нет, где это может показаться сложным, с поддержкой CSS уровня 2 для
типы мультимедиа являются одними из простых инструментов, которые вы можете использовать, чтобы помочь вам
сайт удобен для просмотра на разных носителях.

Начиная с CSS-2,
поддерживаются следующие 10 типов носителей:

Некоторые из вышеперечисленных элементов могут показаться незнакомыми среднему веб-мастеру,
например, шрифт Брайля, который читает текст с экрана пользователю (т. е. полезно
слепому).

— 3 способа указания типов мультимедиа CSS

Есть 3 способа прикрепить медиа-тип к таблице стилей, поэтому наш CSS
применяется только тогда, когда конкретный носитель (например, портативный) используется для
просмотреть страницу:

1) Связанные таблицы стилей:

С указанным выше объявлением «print.css» будет применяться только к
страницы, когда она распечатана (или просматривается в режиме предварительного просмотра в браузере).Вы можете добавить дополнительные связанные таблицы стилей, ориентированные на другие типы мультимедиа, как
хорошо.

В качестве примечания для XML-документов эквивалент приведенного выше будет
быть:

2) Импортированные таблицы стилей:

Импортированные таблицы стилей, используемые здесь, имеют то преимущество, что
условно загружен, то есть таблица стилей будет только загружена
если устройство совпадает с указанным в атрибуте media.В малом
устройства с пропускной способностью, такие как карманные компьютеры, любая экономия на ненужной полосе пропускания
может быть значительным. Недостатком этой техники в настоящее время является
отсутствие поддержки браузера / устройства по сравнению с методом 1) выше.

3) Встроенные таблицы стилей с помощью правила @media:

Как видите, любые объявления CSS, которые вы хотите применить только для
«Проекция» должна быть заключена в блок @media.

Создание удобных для печати страниц с использованием CSS

Amazon.com: Портативная портативная игровая консоль LKTINA 8GB 4.3 » 1000 LCD, медиаплеер с камерой, встроенный в 1200+ реальных видеоигр, для игр gba / gbc / SFC / fc / SMD, лучший подарок для детей и взрослых — синий : Игрушки и игры

Цвет: Синий

Как найти другие игры?

Найдите значок «Игры» в нижнем левом углу экрана, нажмите клавишу «O» для входа, выберите «Ext-Games» — «Список каталогов», нажмите клавишу «O» для входа, вы увидите больше игр.. Вы также можете найти больше игр в «Браузере».

Как сохранить игру？

Нажмите кнопку «ВЫБРАТЬ», выберите «Сохранить игру», чтобы сохранить прогресс игры и сыграть снова с последним прогрессом игры.

Как добавлять игры?

Сначала загрузите игру на компьютер, подключите игровую консоль к компьютеру, а затем скопируйте игру с компьютера в папку «Игра» на игровой консоли.

Функция:

Многоязычный: английский, японский, корейский, испанский, португальский, русский, итальянский, французский, немецкий.

Функции съемки: встроенная 1,3-миллионная интерполированная цифровая камера с двумя миллионами пикселей и функции DV-фотосъемки со вспышкой

Особенности игры: 8-64 следующие игры, онлайн-игры Видео: поддержка форматов AVI, WMV, FLV, RM, RMVB , MP4, 3GP, MPEG, VOB, DAT и SWF.

Музыка: поддержка форматов WMA, DRM WMA, OGG, APE, FLAC, WAV и AAC.

Встроенный микрофон для записи звука, функция громкой связи, электронная книга с поддержкой функций обучения, синхронизация текстов песен, поддержка двухстрочного отображения текста песен, хранилище файлов — любой браузер для хранения файлов, удаление, копирование и другие операции, менеджер данных Point Play

Тип батареи: Встроенная литиевая батарея, фильм около четырех часов, музыка в формате MP3 8 часов.

Контроль и регулирование: не поддерживает многозадачные операции

Внешняя карта расширения: максимальная поддержка 32 ГБ TF Mini Card

Размер / вес продукта: 17,5 * 7,5 * 2 см / 152 г

Размер / вес упаковки: 22 * ​​13,5 * 5,5 см / 255 г

В пакет включено:

1 шт. X портативная игровая консоль

1 шт. X наушники

1 шт. X USB-кабель

1 шт. X инструкция по эксплуатации

Учебник

CSS — Типы мультимедиа

Типы мультимедиа

CSS предоставляет простой способ настроить таргетинг на браузеры на разных типах устройств или для разных целей.Например, дизайн
вы производите для обычного настольного браузера, возможно, не подходят для карманного устройства или принтера. Они известны как средства массовой информации
типы. Существует несколько типов мультимедиа, и большинство браузеров обычно сосредотачиваются только на одном или двух, в зависимости от того, что
они предназначены для использования. Opera на сегодняшний день является наиболее универсальной и поддерживает шесть различных типов мультимедиа.

Все основные браузеры используют экранные медиа по умолчанию и будут применять экранные медиа при просмотре веб-страниц в обычном режиме.Большинство из них также поддерживают печатные носители и будут использовать их при печати страницы. Проекционный носитель используется для полноэкранного
просмотр в Opera (версия 9 и выше вернется к экранному носителю, если его нет для проецирования) и предназначен для
отображение на дисплеях проектора. Портативные носители используются на портативных устройствах, небольших экранах или узких дисплеях. это
поддерживается Opera, OpenWave, предположительно Obigo и частично Pocket Internet Explorer, но пользователю может потребоваться
чтобы включить его, поскольку браузеры могут по умолчанию отображать мультимедиа.Некоторые телевизионные браузеры (включая Opera) поддерживают телепрограммы.
Аудиосигналы, переименованные в «Речь» в CSS 2.1, используются, когда страница читается синтезатором голоса. Opera поддерживает
речевые носители при установленном голосовом модуле.

Теоретически браузер должен одновременно применять только один тип носителя. Escape 5 нарушает это правило, применяя screen и
проекционные типы носителей одновременно (он никогда не применяется для портативных устройств, даже если он предположительно предназначен для устройств).
WebTV / MSNTV нарушает это правило, одновременно применяя экранные и телевизионные типы мультимедиа.Pocket Internet Explorer тоже ломается
это правило. Он полностью игнорирует встроенные объявления мультимедиа, и, если он указан в атрибуте мультимедиа, он ошибается с экраном и
портативное устройство друг для друга и применяет их одновременно друг к другу, даже если вы укажете ему использовать только экран
медиа (рабочий стол). NetFront допускает ошибки с правилами @media и может применять стили из правил внутри всех
их, независимо от того, какие типы носителей указаны.

Большинство обычных стилей доступны для всех типов носителей, но есть некоторые стили, которые имеют смысл только в некоторых
Типы СМИ.Например, стили font-size и курсора не имеют никакого смысла в речевых медиа.
Некоторые стили доступны только в определенных типах мультимедиа. Например, стиль с разрывом страницы перед — это только
доступны в типах мультимедиа, поддерживающих отображение страниц, таких как печать, проецирование и ТВ.

Если ваш дизайн плохо работает в других режимах, вам следует подумать о добавлении разных стилей для разных типов мультимедиа.
Например, если ваш дизайн подходит только для настольных дисплеев (возможно, он ограничивает минимальное разрешение 1024×768 или 800×600)
вы можете захотеть добавить несколько стилей, чтобы он работал на портативных устройствах, вместо того, чтобы ожидать, что эти браузеры переформатируют вашу страницу.Если ваша навигация основана на визуальных идентификаторах, таких как эффекты наведения, вы можете добавить дополнительные стили для портативных устройств.
устройства, на которых обычно нет мыши. И вы можете добавить несколько дополнительных слов в речь, а слуховые средства — в
помочь речевым пользователям разобраться в этом. Точно так же вы можете добавить дополнительную информацию на носитель Брайля. Или может ты хочешь
чтобы скрыть вашу навигацию при печати страницы.

По умолчанию таблицы стилей применяются ко всем типам мультимедиа. Вы можете использовать любой из трех способов, чтобы стили применялись только к определенным
Типы СМИ.Первый — использовать медиа-атрибут ссылки или тега стиля. Это принимает типы мультимедиа через запятую.
список:

Вы также можете использовать тип носителя ‘all’ , чтобы указать, что таблица стилей предназначена для всех типов носителя.Это
то же самое, что и без атрибута media.

Второй способ указать тип носителя — использовать правило @media . Это позволяет вам добавлять медиа, специфичные для
разделов внутри таблицы стилей, чтобы вы могли использовать одну таблицу стилей и по-прежнему предоставлять стили для определенных типов мультимедиа.
Правило @media аналогично атрибуту media; он принимает список, разделенный запятыми. Это правило можно поставить
в любом месте вашей таблицы стилей (они могут даже быть вложенными) и должны содержать соответствующие правила стиля внутри фигурных скобок.Любые стили, не входящие в правило @media , применяются ко всем типам мультимедиа:

  п {цвет: зеленый; }
@media screen, projection, tv {
  #foo {позиция: абсолютная; }
}
@media print {
  #navi {display: none; }
}
@media handheld {
  #foo {позиция: статическая; }
}  

Третий способ указать тип носителя — использовать правило @import . Это позволяет вам импортировать таблицу стилей, но использовать ее только для определенного набора типов мультимедиа.Однако обратите внимание, что он не поддерживается в Internet Explorer 7-, и таблица стилей не будет импортирована ни для одного типа мультимедиа:

  @import url (bigscreen.css) экран, проекция, тв;  

В браузерах с очень высоким уровнем поддержки CSS вы также можете использовать медиа-запросы CSS для применения различных стилей,
в зависимости от размера экрана, окна браузера или различных других функций устройства. На данный момент это
поддерживается Opera, Chrome / Safari 3+, Konqueror 4+, Firefox 3.1+ и Internet Explorer 9+, и, надеюсь, это будет
распространяется и на другие браузеры. Opera 8 позволяет только проверить
простые вещи, такие как ширина (окна), высота, ширина устройства и высота устройства, и он может обрабатывать только пиксельные единицы. Opera 9+ может
проверьте также другие мультимедийные функции и можете использовать любые единицы. Очень немногие мобильные версии Opera все еще используют
движок Opera 8.

  @media all and (max-width: 500 пикселей) {
  #foo {позиция: статическая; }
}  

Обратите внимание, что ICEbrowser и OpenWave неправильно обрабатывают медиа-запросы и всегда могут применять стили внутри них.

Особенности портативных устройств

Я на мгновение остановлюсь на карманных компьютерах, поскольку после обычных браузеров настольных компьютеров и ноутбуков карманные компьютеры являются наиболее распространенными.
в использовании. Однако эти принципы применимы ко всем типам носителей, за исключением экрана.

Нет правила, согласно которому вы должны создать таблицу стилей для карманных компьютеров. Фактически, вы должны создать только карманный компьютер.
таблица стилей, если у вас есть конкретное представление о том, как вы хотите, чтобы ваша страница выглядела на портативном устройстве.В портативных браузерах есть
определенные ограничения, и если вы не желаете их учитывать, просто оставьте все в покое и сделайте свою таблицу стилей
таргетинг на все типы носителей. Многие портативные браузеры могут применять переформатирование страниц, чтобы попытаться заставить их работать, даже если вы
не делайте этого сами. На самом деле, в большинстве случаев браузеры справляются с этим лучше, чем вы, и вы можете им помочь.
наряду с чистой семантической разметкой.

Портативный носитель немного перегружен.Это означает несколько вещей:

• КПК имеют маленький экран. Размеры могут варьироваться от 100 пикселей до более 500 пикселей в ширину. Конструкции на основе
  позиционирование или поплавки обычно не работают, как и большие
  поля, отступы, шрифты или изображения. В частности, проблематичны объявления. Фиксированное позиционирование может вызвать серьезные проблемы
  если элемент занимает слишком большую часть экрана.
• КПК не имеет надежного указывающего устройства. Ни одна веб-страница не должна заставлять пользователя использовать мышь, но
  особенно с портативными устройствами, на это нельзя положиться.Многие КПК не имеют указывающего устройства и будут
  просто позволяйте пользователю фокусировать ссылки или входные данные формы, по одной за раз. Некоторые, но, конечно, не все, могут позволить пользователю
  также фокусировать цели событий мыши. Многие могут использовать стилус или пальцы, но они касаются экрана только одним касанием за раз, и
  не может использоваться для эффектов непрерывного наведения, таких как меню на чистом CSS. Лишь небольшой процент браузеров устройств используют
  указатель мыши, но они очень неуклюже управляются с помощью клавиш и не могут быть надежно использованы для управления.
• КПК обычно не имеют полной клавиатуры. У них обычно нет клавиш-модификаторов ( Ctrl / Alt / Shift ) и
  может иметь ограниченную клавиатуру с очень небольшим количеством клавиш, часто требуя нескольких нажатий клавиш для ввода одного символа. В общем, да
  не запускать ключевые события при вводе текста и может фактически не сохранять фокус на вводе при вводе (обычно с использованием диалогового окна
  что не контролируется браузером). В некоторых случаях у них может быть довольно полная клавиатура, но она будет отсутствовать.
  такие клавиши, как F1 , по-прежнему довольно неудобны в использовании.Веб-страницы, которые зависят от событий клавиатуры или доступа
  ключи обычно не подходят для карманных компьютеров.
• Наладонникам не нравятся рамки или прокручиваемые области. Во многих случаях отсутствие указательного устройства является причиной
  проблема, и очень сложно сфокусироваться и прокрутить другой кадр. Некоторые браузеры могут отображать только одну полосу прокрутки — на
  край экрана.

У карманных компьютеров

• обычно низкая пропускная способность и не так много памяти для хранения веб-страниц. Веб-страницы, которые используют
  много изображений для украшения или содержания не приветствуются.

Портативный тип носителя должен представлять все это, и если вы создаете портативную таблицу стилей, он должен справляться со всеми
этих проблем. Он не должен пытаться установить какую-либо определенную ширину — это довольно распространенная ошибка на реальных страницах — a
портативная таблица стилей должна позволять дизайну работать на экранах разных размеров без необходимости горизонтальной прокрутки. Вы также можете использовать медиа-запросы, чтобы специально настроить таргетинг на
проблемы, вызванные размером экрана. Их можно адаптировать к разным размерам экрана, они намного удобнее и гибче.
в этом отношении.

Обратите внимание, что некоторые КПК и планшетные ПК с более высоким разрешением не считаются портативными устройствами. Браузеры, работающие на
они могут не реагировать на переносной тип носителя и вместо этого могут использовать экран. Некоторые портативные браузеры не поддерживают достаточно
CSS для использования портативных носителей и всегда будет использовать экранные носители.

Создать портативную таблицу стилей можно двумя способами.

1. Убедившись, что обычная таблица стилей не применяется к портативным носителям, а затем создать отдельную таблицу стилей,
   относится только к портативным устройствам.
2. Сделав таблицу стилей, которая применяется ко всем типам мультимедиа, вы получите портативную таблицу стилей, которая изменяет только части
   полной таблицы стилей, которые вызывают проблемы для карманных компьютеров.

Какой из них вы используете, зависит от того, что лучше всего подходит вам и вашему сайту.
Этот сайт использует второй подход, уменьшая крупные шрифты, удаляя поля, плавающие элементы, позиционируя и показывая несколько
дополнительные ссылки для помощи в навигации. Он также использует медиа-запросы, чтобы помочь постепенно применить некоторые из этих изменений к различным
размеры окон, поэтому даже рабочие столы могут иметь макет, соответствующий размеру окна браузера.

Мобильные браузеры

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

Opera Mobile

• Один из самых популярных и распространенных портативных браузеров. По умолчанию устанавливается на очень большое количество телефонов и КПК.
• Имеет очень высокий уровень поддержки CSS.
• Поддерживает медиа-запросы.
• Может использовать портативные носители, если пользователь решит включить эту опцию, и если вы специально нацеливаетесь на портативные носители (так что на самом деле вы должны сказать «портативный», а не «все»).
• В портативном режиме он использует экранные носители, если портативные носители специально не нацелены. Затем страница будет переформатирована, чтобы соответствовать размеру экрана, поэтому на самом деле будет использоваться очень мало CSS.
• Позволяет пользователю включать / отключать портативный режим, если они хотят, чтобы они могли видеть страницу, отображаемую так, как если бы она была на рабочем столе.
• Не будет использовать портативные носители на устройствах с высоким разрешением, но все же может быть нацелен с помощью медиа-запросов.
• Может рассматриваться как портативный браузер.

Opera Mini

• Один из самых популярных и распространенных портативных браузеров. Устанавливается по умолчанию на несколько телефонов.
• Разработан для работы на устройствах с минимальным экраном и минимальными возможностями.
• Имеет очень высокий уровень поддержки CSS в Opera Mini 4 на высокопроизводительных устройствах.
• Поддерживает медиа-запросы.
• Может использовать портативные носители, если пользователь решит включить эту опцию, и если вы специально нацеливаетесь на портативные носители (так что на самом деле вы должны сказать «портативный», а не «все»).
• Позволяет пользователю включать / отключать портативный режим, если они хотят, чтобы они могли видеть страницу, отображаемую так, как если бы она была на рабочем столе.
• Использует экранные носители, если портативные носители специально не нацелены.
• В Opera Mini 4 на высокопроизводительных устройствах очень старается вести себя, как на рабочем столе (включая использование виртуальной ширины экрана), используя мышь. Текст будет обернут (и их контейнеры будут расширены по мере необходимости), чтобы текст соответствовал ширине экрана.
• В Opera Mini 3-, или в Opera Mini 4 на устройствах с ограниченными возможностями, или в Opera Mini 4 на устройствах с высокими возможностями, если пользователь выбрал эту опцию, страница будет переформатирована, чтобы соответствовать размерам экрана, поэтому очень мало Фактически будет использоваться CSS.
• Может рассматриваться как портативный браузер.

NetFront / Blazer

Блейзер

• Один из самых популярных и распространенных портативных браузеров. Устанавливается по умолчанию на большое количество телефонов и КПК.
• Имеет разумный, но не очень хороший уровень поддержки CSS.
• Использует экранные медиа и не может быть нацелен на использование медиа-типов CSS. После этого страница будет отформатирована под размер экрана.
• Некоторые специальные пользовательские версии используют только портативные носители и игнорируют любые таблицы стилей, которые специально не нацелены на них, что означает, что большинство страниц остаются полностью без стиля. Они также игнорируют изображения на многих страницах. Однако эти версии не очень распространены.
• Имеет неработающую реализацию правил @media ; он часто применяет стили из любого типа носителя (например, печатного носителя), игнорируя объявление носителя.
• Позволяет пользователю отключать или изменять форматирование, если они хотят, чтобы они могли видеть страницу, отображаемую так, как если бы она была на рабочем столе.
• Следует игнорировать как портативный браузер. Относитесь к нему как к настольному браузеру и надейтесь, что его форматирование может быть адаптировано пользователем во что-то читабельное.

Карманный обозреватель Internet Explorer

• Не очень популярен. Устанавливается по умолчанию на Pocket PC и устройствах Windows Mobile, но обычно заменяется Opera или NetFront, поскольку они обычно работают намного лучше.
• Плохой уровень поддержки CSS.
• Одновременно использует портативные носители и экранные носители (нарушая правила CSS). Затем страница будет переформатирована, чтобы соответствовать размеру экрана, поэтому на самом деле будет использоваться очень мало CSS.
• понимает только атрибуты media = "..." , но не @media или media в правилах @import .
• Иногда использует @media блоков, но ненадежно — игнорируется на большинстве страниц.Может игнорировать всю таблицу стилей, если она содержит медиа-запросы (не обычные блоки @media ).
• Позволяет пользователю отключать или изменять форматирование, если они хотят, чтобы они могли видеть страницу, отображаемую так, как если бы она была на рабочем столе (за исключением очевидных ограничений CSS).
• Может рассматриваться как портативный браузер, если вы применяете таблицу стилей только так, как она понимает, и вы используете только метод переопределения стилей, поскольку он всегда будет применять экранные медиа.

Браузер

Series 60 и Safari на iPhone

• Устанавливается по умолчанию на новейших телефонах Nokia Series 60. Пока не пользуется популярностью.
• Имеет достаточно высокий уровень поддержки CSS, так как основан на движке Safari.
• Использует экранные медиа и не может быть нацелен на использование медиа-типов CSS. Очень старается вести себя как на рабочем столе (в том числе с использованием виртуальной ширины экрана), с помощью мыши и практически без переформатирования.
• Некоторые новые выпуски поддерживают медиа-запросы.
• Следует игнорировать как портативный браузер. Относитесь к нему как к настольному браузеру и надейтесь, что он работает.

Minimo / Fennec

• Все еще в очень медленной разработке. Не пользуется популярностью.
• Имеет достаточно высокий уровень поддержки CSS, так как основан на движке Gecko.
• Использует экранные медиа и не может быть нацелен на использование медиа-типов CSS.Затем страница будет переформатирована в Minimo, чтобы соответствовать размеру экрана, поэтому на самом деле будет использоваться очень мало CSS.
• Позволяет пользователю отключить переформатирование, если они хотят, чтобы они могли видеть страницу, отображаемую так, как если бы она была на рабочем столе.
• Некоторые новые выпуски поддерживают медиа-запросы.
• Следует игнорировать как портативный браузер. С Minimo просто надейтесь, что его переформатирование сработает.

Konqueror встроенный

• Все еще в очень медленной (практически не существующей) разработке.Не пользуется популярностью.
• Имеет достаточно высокий уровень поддержки CSS, так как основан на движке KHTML.
• Использует экранные носители и не может быть нацелен на использование типов мультимедиа CSS (все выпуски были основаны на более ранних версиях konqueror, которые их не поддерживали). Страница не будет переформатирована. Использует интерфейс мыши.
• Следует игнорировать как портативный браузер. Отсутствие переформатирования означает, что большинство страниц не работают.

OpenWave

• Довольно популярный портативный браузер.Устанавливается по умолчанию на ряд телефонов.
• Имеет проблемную поддержку CSS (например, проблемы с смешиванием селекторов классов и селекторов идентификаторов).
• Не обрабатывает медиа-запросы правильно ни как медиа-запросы, ни как с обработкой ошибок CSS (требуется для браузеров, которые их не поддерживают). Он может применять правила внутри них, даже если запрос не соответствует текущей ситуации.
• Использует портативные носители. После этого страница будет отформатирована под размер экрана.
• Может рассматриваться как портативный браузер.

Обиго

• Устанавливается по умолчанию на некоторых телефонах.
• Имеет относительно хорошую поддержку CSS в разрабатываемых версиях.
• Использует портативные носители, если они есть.
• Может использовать экранные носители, если портативные носители не предназначены специально. После этого страница будет отформатирована под размер экрана.
• Позволяет пользователю отключить переформатирование, если они хотят, чтобы они могли видеть страницу, отображаемую так, как если бы она была на рабочем столе.
• Может рассматриваться как портативный браузер.
• Настаивает, что веб-разработчики должны платить за тестирование своих сайтов в нем.

Глубокая рыба

• Все еще находится в стадии закрытой альфа-разработки, еще не доступен для тестирования.
• Возможно, связан с Обиго, который стал частью партнерского соглашения с материнской компанией незадолго до того, как было объявлено о Deep Fish.
• Типы носителей неизвестны, но в демонстрационных изображениях используются экранные носители.
• Вместо переформатирования используется виртуальная ширина экрана.
• Наверное, нельзя рассматривать как портативный браузер.

ThunderHawk / Болт

• Не пользуется популярностью.
• Имеет довольно высокий уровень поддержки CSS, поскольку он основан на движке KHTML / Safari (Bolt — это прогресс от ThunderHawk, который использует WebKit вместо кастомной вилки KHTML, поскольку они оба используют одно и то же серверное решение ThunderHawk. также может переключиться на WebKit, если он еще не используется).
• ThunderHawk, по-видимому, использовал портативные носители, но я не могу это проверить. Bolt использует только экранные носители. Ни один из них в настоящее время не поддерживает медиа-запросы.
• Thunderhawk может использовать экранный носитель, если нет портативного носителя, но вместо переформатирования использует виртуальную ширину экрана.
• Bolt использует виртуальную ширину экрана только с обтеканием строк вместо полного переформатирования. Хотя он утверждает, что имеет мобильное представление, это только заставляет его запрашивать страницы WAP с возвратом к обычному HTML вместо использования портативного CSS.
• Следует игнорировать как портативный браузер. Относитесь к нему как к настольному браузеру и надейтесь, что он работает.
• ThunderHawk настаивает на том, что веб-разработчики должны платить за тестирование своих сайтов в нем.

Пиксель

• Не пользуется популярностью.
• Типы носителей неизвестны, но в демонстрационных изображениях используются экранные носители.
• Вместо переформатирования используется виртуальная ширина экрана.
• Наверное, нельзя рассматривать как портативный браузер.
• доставляется только производителям телефонов и операторам сетей, поэтому не доступен для тестирования обычными веб-разработчиками.

Помимо соответствующих браузеров, есть и другие, которые все еще используются, но являются в большей степени пережитками раннего
дней мобильного просмотра.

HTML-браузеры с ограниченным доступом

Иногда они устанавливаются в качестве браузеров по умолчанию на телефонах, но заменяются соответствующими веб-браузерами.Они недостаточно хорошо понимают HTML или CSS, поэтому их следует игнорировать. Если они случатся
иметь возможность использовать вашу страницу (что им и следует делать, если вы используете семантический HTML), то это бонус.

Браузеры WAP / WML

Иногда они устанавливаются в качестве браузеров по умолчанию на телефонах, но заменяются соответствующими веб-браузерами.
Они предпочитают не предоставлять доступ ко всей сети и требуют, чтобы авторы тратили время и ресурсы на дополнительные
версия всех своих страниц.Я полностью их игнорирую.

XHTML-браузеры

Они похожи на WAP-браузеры, но могут использовать небольшой процент реальных веб-страниц, если они используют XHTML. Они также
заменяется соответствующими веб-браузерами. Я их тоже игнорирую.

Браузеры для портативной разработки

При разработке веб-страниц полезно иметь возможность тестировать их в портативном браузере. Однако не у всех есть
доступ к мобильному браузеру, и, кроме того, стоимость его использования довольно высока.Полезно иметь возможность использовать
браузер на рабочем столе для тестирования. Некоторые браузеры доступны только на реальных устройствах, но следующий браузер
инструменты доступны для десктопов:

Opera

В настольной версии есть все необходимое для тестирования Opera Mobile. В настольной версии используйте View — Small screen. Если твой
страница не имеет ручной таблицы стилей, это будет использовать рендеринг малого экрана для переформатирования страницы таким же образом, как
Opera Mobile.Вы можете изменить размер окна, чтобы увидеть, как оно работает при разных разрешениях. Если на вашей странице есть КПК
таблица стилей, она будет использоваться так же, как Opera Mobile. Вы также можете использовать View — Fit to width, чтобы увидеть
переформатирование для устройств разного размера.

Opera Mini

Real Opera Mini, работающая в эмуляторе телефона.

NetFront

NetFront с эмулятором, работающим на вашем дестопе. Поэкспериментируйте с различными вариантами переформатирования, но не надейтесь.
Эмулятор NetFront исчез с их сайта, и я ничего не могу найти в их загрузках для разработчиков.
Видимо они больше не хотят, чтобы разработчики тестировали. Если вы хотите протестировать его, получите Windows Mobile (эмулятор) и запустите
скачать на нем пробную версию NetFront.

Карманный обозреватель Internet Explorer

Pocket IE на эмуляторе PocketPC, работающем на вашем дестопе. Обратите внимание, что установщик запутался. Вам также понадобится сетевой драйвер виртуальной машины. Если у вас возникли проблемы с работой сети, установите ActiveSync и используйте его.

Браузер Series 60

Последний SDK (эмулятор) Series 60 содержит браузер Series 60. Вам нужно будет зарегистрироваться, чтобы скачать его. К сожалению, это ограниченная по времени пробная версия, и она оставляет после себя некоторые ключи реестра, которые пытается помешать вам удалить — предположительно, чтобы обеспечить соблюдение своего временного лимита. Очевидно, они не хотят, чтобы веб-разработчики тестировали в нем. Жалость.

Safari на iPhone

Используйте обычный Safari. Установка iPhone в целом такая же.

Minimo

Расширение Firefox, которое применяет основную таблицу стилей переформатирования Minimo к любой странице. Он не применяет специфические для сайта хаки, которые использует Minimo, и не может имитировать другие браузеры, которые используют правильные портативные носители или медиа-запросы (другими словами, он только показывает вам, как Minimo будет отображать обычную веб-страницу, это может быть ничто например, как это будут отображать более распространенные портативные браузеры).

Konqueror встроенный

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

OpenWave

OpenWave с эмулятором, работающим на вашем рабочем столе.

Обратите внимание, конечно, что если вы хотите проверить ограничения памяти, вам нужно будет использовать эмулятор или реальное устройство. Тестировать
ограничения пропускной способности, вам нужно будет использовать настоящее мобильное устройство. Обратите внимание, что также доступны универсальные эмуляторы (например,
эмуляторы для устройств Series 60 или Windows Mobile). Их можно использовать для тестирования других браузеров.

Некоторые другие браузеры настаивают на том, что разработчики должны оплачивать покупку или аренду.
для того, чтобы протестировать в нем свои сайты.На мой взгляд, браузер, который выбирает такой подход, не хочет, чтобы разработчики тестировали
в нем (они, конечно, не могут ожидать, что каждый отдельный веб-разработчик будет платить за право тестирования чужого
продукт на их сайте), и их следует игнорировать.

Печатные инструменты специальные

Существует несколько инструментов, поддерживающих CSS, единственной целью которых является преобразование документов HTML или XML, стилизованных с помощью CSS, в
печатные документы. Они могут либо печатать напрямую, либо преобразовывать документ в формат, более ориентированный на принтер, например
как PostScript или PDF.

Большинство этих инструментов предлагают меньшую поддержку CSS, чем обычные браузеры, многие даже ниже, чем CSS.
поддержка Internet Explorer 6, и в большинстве случаев лучший результат можно получить при печати из браузера.
Примерами этих инструментов могут быть HTML2PS (обычно в сочетании с
PS2PDF) или DOMPDF.

Есть одно исключение; программа под названием Prince.
Это единственный такой инструмент, который поддерживает CSS лучше, чем большинство браузеров.
Фактически, его поддержка печатных СМИ CSS 2.1 эквивалентна Opera, с некоторыми дополнениями из созданного содержимого CSS 3.
для модуля Print Media, который не поддерживает ни один браузер.В результате это единственный инструмент преобразования, который я рекомендую в настоящее время, и, по сути, учебные пособия на этом сайте (включая
этот) предназначены для печати для личного или образовательного использования с Prince.
Это бесплатно для личного или некоммерческого использования и может быть лицензировано для коммерческого использования.

Последнее изменение: 19 марта 2011 г.

1. Назад
2. Далее

Amazon.com: портативная игровая консоль, встроенные бесплатные 10000 игр 8 ГБ 4,3-дюймовый TFT-экран медиаплеер с поддержкой камеры ТВ-выход, портативная перезаряжаемая игровая консоль для GBA / GBC / SFC Games, Подарок для детей и взрослых: игрушки и игры

Цвет: Синий

📌 Описание:

— Имеет форматы JPG, BMP, GIF.

Вы можете играть в более чем 10000 встроенных игр в любое время и в любом месте.

— Несколько поддерживаемых форматов для музыки, фотографий и видео.

Паровая стереомузыка, полноцветный, высокоскоростной, четкий, широкоформатный TFT.

— Настройка функций: поддержка настройки и чтения различных функций и атрибутов.

— Комбинируйте игры, смотрите фильмы, слушайте стерео музыку, просматривайте цифровые фотографии, снимайте фото и видео.

— Встроенная память 8 ГБ, поддержка 8 эмуляторов, поддержка 8-битных, 16-битных, 32-битных, 64-битных и 128-битных игр.

📌 Технические характеристики:

Материал: ABS

Цвет: синий

Экран: 4,3 дюйма

Батарея: Встроенный аккумулятор емкостью 1500 мАч

Время зарядки: 2-3 часа

Время воспроизведения: 8-10 часов

Порт подключения: MINI 5P USB, 3,5 мм выход для наушников / ТВ, слот для карт TF

📌 T техническая поддержка:

* Память: встроенная 8 ГБ, поддерживает расширение карты TF, максимальное расширение составляет 32 ГБ (максимум)

* Экран: 4.3 дюйма, 260000 полноцветных TFT-экранов

* Поддерживаемые форматы игр: GBA, NES, SFC, MD (BIN), GB, GBC, CPS1, CPS2, NEOGEO, SMS (GBA), PS1

* Поддержка музыкальных форматов: MP3, WMA, OGG, WAV, AAC, APE

* Поддерживаемые фотографии: jpeg, BMP, GIF, TIF и PNG

Поддержка видео форматов: RM, RMVB, AVI, MP4, 3GP

* Поддержка формата электронных книг: TXT

* Другие функции: камера, электронная книга, калькулятор, функция часов, календарь, диктофон

* Поддерживаемые языки: 20 языков (вы можете выбрать правильный язык в настройках)

* Поддерживает 8 симуляторов

* Поддержка выхода AV TV

* Поддержка 8-битных, 16-битных, 32-битных, 64-битных, 128-битных игр

📌 ЧТО ВЫ ПОЛУЧАЕТЕ ：

1 * Игровая консоль

1 * AV-кабель

1 * Руководство

1 * USB-кабель

Первый мультимедийный портативный компьютер, разработанный для 21 века.

Да, я знаю, что это телефон. Он называется «IPhone». Но это не телефон . Точно так же, как Sony Playstation не является и остается видеоигрой консолью , Apple хочет, чтобы мир осознал, что IPhone больше не смартфон, это нечто большее. В течение последних нескольких десятилетий отраслевые аналитики, специализирующиеся на различных технологиях, задавались вопросом: «Куда денется Apple, когда iPhone достигнет максимальной насыщенности рынка?» Каким будет следующий продукт , похожий на iPhone , который восстановит лидерство Apple в качестве двигателя технологических инноваций? Что ж, сюрприз, сюрприз, оказывается, IPhone .

Любой, кто слушал обещанные обновления продукта и не кричал о партнерстве с Verizon, быстро понимал, что происходит. Apple раскрывала свое новое и дальновидное видение того, какой будет следующая портативная технология. Это телефон? да. Это игровая приставка? да. Возможно, это одна из лучших мини-видеокамер / видеокамер в мире? да. Это крутая микролидарная система? да. Отличается ли он революционным дизайном процессора, включающим собственный процессор машинного обучения (ML)? да.

ЛИДАР-анализ дна океана.

И это еще не все. Я не упомянул ни дизайн звуковой системы, ни обновления CPU-GPU, ни системы с двумя и тремя объективами камеры, ни новый формат изображения: APPLERAW. Другими словами, вам потребуется некоторое время, чтобы распаковать только основные моменты. И тогда, когда вы это сделаете, ваше воображение взорвется, когда вы подумаете обо всех возможных применениях IPhone 12. Внезапно каждая крупная и независимая киностудия / медиа-студия должна спросить, нужно ли им покупать IPhone 12.Внезапно каждый блогер-путешественник, у которого текла слюна из-за своего Sony A7 III , проверяет среднюю продажную цену ALPHA на EBAY, подсчитывая, какой удар они получат, когда перейдут на PRO MAX.

Кто-то скажет: «Вы преувеличиваете. Это просто еще одна камера для смартфона «. Нет, это высококачественная HD-камера / видеокамера / LIDAR по цене менее 1200 долларов. Один только лидар делает это устройство революционным. Когда разработчики получат SDK для LIDAR, они будут создавать приложения, которые изменят правила игры во всех секторах бизнеса.Возьмем, к примеру, строительную отрасль: благодаря LIDAR этот телефон может видеть сквозь стены. Электрики и сантехники, которым нужен единый инструмент, который поможет им увидеть, что происходит за каменным листом, смогут использовать свой iPhone. Почему бы и нет? Экран прочнее и водонепроницаем. Это телефон? Да, но это также высокотехнологичный инструмент для строителей домов.

Все это стало возможным благодаря новому процессору BIONIC A14 . Именно здесь истинные инновации Apple проявляются ярче всего.Доводя нанотехнологии до крайностей, они создали одно из самых передовых представлений о портативных компьютерах, когда-либо предпринимавшихся. Включая ML, они заглядывают в будущее, в то время, когда все интеллектуальные устройства будут управляться алгоритмами обучения, которые гарантированно улучшат общее впечатление потребителей от таких технологий, как Augmented Reality (AR).

Так что да, я знаю, что это телефон , но после сегодняшнего дня называть IPhone 12 «просто еще одним смартфоном» означает, что вы просто не видели видение ; не было момента , когда вы поняли, что Apple сделала сегодня то, о чем никто не мог и подумать, они превратили IPhone в первое мультимедийное портативное устройство, разработанное для 21-го, ^-го, -го века, .

Создание таблиц стилей для карманных устройств

30 мая 2007 г.

•
Читать 3 мин

Берегись! Этот пост был написан в 2007 году, поэтому он может содержать информацию, которая больше не
точный. Я храню подобные сообщения в исторических целях и во избежание гниения ссылок, поэтому, пожалуйста, держите это в
ум, пока вы читаете.

— Кори

Это не редкость, поэтому сегодня можно увидеть, как кто-то серфит в сети со своим мобильным телефоном или КПК или, по крайней мере, пытается это сделать.К сожалению, портативным технологиям еще предстоит пройти долгий путь, прежде чем они покорят Интернет с помощью своих крошечных экранов. Хорошая новость заключается в том, что с небольшой помощью таблиц стилей ваш сайт может выглядеть презентабельно даже в чьей-то руке!

Ручные таблицы стилей #

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

Связывание портативной таблицы стилей #

Мы начинаем со ссылки на то, что станет нашей портативной таблицей стилей:

Обратите внимание, что для атрибута media установлено значение handheld вместо screen .
Теперь пора создать your_handheld_style.css .

Создание портативной таблицы стилей #

Вы можете использовать обычную таблицу стилей экрана в качестве отправной точки для создания вашей портативной таблицы стилей. В зависимости от сложности CSS может быть лучше начать с нуля или просто копировать и вставлять по одному разделу за раз, постепенно изменяя стили и тестируя по ходу. Вы даже можете изменить внешний вид портативной версии своего веб-сайта. Здесь важно помнить, что вы создаете дизайн, предназначенный для отображения на небольших экранах, часто не более 240×320 пикселей.

Какой бы маршрут вы ни выбрали, неизбежен тот факт, что вам в конечном итоге понадобится предварительный просмотр «портативной» версии вашего веб-сайта … но что, если у вас нет портативного устройства?

Тестирование портативной таблицы стилей без портативного устройства #

Использование веб-браузера Opera #

В Opera есть много функций, которые мне очень нравятся, одна из них — Small screen . Нажав на View → Small screen или нажав Shift + F11 , вы можете просмотреть любой веб-сайт в имитируемом «портативном» режиме.Обычно так я тестирую свои портативные таблицы стилей, когда у меня нет портативного устройства:

Во время тестирования в режиме Small screen может оказаться полезным добавить следующий код в вашу таблицу стилей. Это будет имитировать ширину экрана многих распространенных портативных устройств. Просто не забудьте удалить его перед загрузкой!

  html {
  ширина: 240 пикселей;
  граница: сплошная 1px # 000000;
}
  

Еще одна вещь, которую я бы порекомендовал использовать в вашей портативной таблице стилей:

  * {максимальная ширина: 100%; }
  

Это предотвратит превышение ширины экрана устройства такими элементами, как изображения и текстовые поля.

Использование Opera Mini #

Еще один способ проверить вашу портативную таблицу стилей — использовать Opera Mini. Сама программа требует наличия мобильного телефона, но не беспокойтесь! Также есть онлайн-симулятор, который вы можете опробовать на любом веб-сайте. Вот как на нем выглядит A Beautiful Site:

Примечание о портативных таблицах стилей #

Важная вещь, которую следует помнить при кодировании портативной таблицы стилей, — это тот факт, что большинство портативных устройств не будут отображать ваш сайт точно так, как вы хотите.Звучит как-то иронично, что вы просто потратили время на написание совершенно другой таблицы стилей только для того, чтобы узнать, что она не будет работать на носителе, на котором вы собирались работать. Что ж, еще не все потеряно. Позвольте мне объяснить …

Из-за аппаратных и программных ограничений большинство портативных устройств предназначены для отображения определенных элементов веб-страниц таким образом, чтобы это работало как для устройства, так и для пользователя. Например, было бы бесполезно, если бы КПК с разрешением экрана 240×320 пикселей отображал полноразмерное изображение размером 800×600 пикселей.В большинстве случаев устройство автоматически уменьшает изображение, чтобы его можно было просмотреть полностью. Аналогичные настройки внесены в текст, ссылки, элементы формы, плавающие элементы и т. Д.

Итак, что хорошего в портативных таблицах стилей, если они на самом деле не поддерживаются? Что ж, они обеспечивают основу для дизайна, который вы собираетесь использовать в портативной версии своего веб-сайта. Мало того, поддержка портативных таблиц стилей быстро растет по мере развития технологий. Я бы сказал, что из-за того небольшого количества времени и усилий, которые им действительно требуются для производства, они того стоят.

Что делать, если у меня нет портативной таблицы стилей? #

Действительно хороший вопрос. Большинство портативных браузеров либо попытаются использовать вашу обычную таблицу стилей, либо вообще откажутся от стилей. Преимущество использования портативных таблиц стилей заключается в том, что вам до некоторой степени гарантировано, что ваш веб-сайт будет хотя бы частично отражать задуманный вами дизайн.