Html не работают телефоны

Открытие файлов HTML на Android

Способ 1: Системные средства

Сначала рассмотрим системные возможности Android. В актуальных версиях «зелёного робота» есть встроенный инструмент для работы с HTML-файлами, доступный в меню «Открыть через…». Использование этой функции покажем на примере чистого Android 10.

Запустите встроенный файловый менеджер, который называется «Файлы».

Далее найдите целевой документ – например, в меню «Недавние» или перейдя в требуемую папку.

Утилита покажет документ как обычную веб-страницу.

Также посредством рассмотренного инструмента можно просмотреть HTML с помощью любого установленного браузера – например, Google Chrome.

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

Способ 2: HTML Viewer

Теперь обратим внимание на специализированные приложения, одним из которых является HTML Viewer от разработчика Yogev Haham.

Запустите программу, затем тапните по кнопке с иконкой файла вверху справа.

ХТМЛ Вьювер запросит доступ к накопителю, предоставьте его.

Файл будет открыт для просмотра в режиме исходного кода.

Для того чтобы просмотреть его в веб-режиме, тапните по значку глобуса.

Как видим, HTML Viewer отлично справляется с поставленной задачей. Единственными препятствиями для комфортного использования могут стать только отсутствие русского языка и наличие рекламы.

Способ 3: HTML Reader/Viewer

Если предыдущее приложение вас по каким-то причинам не устроило, можете воспользоваться решением HTML Reader/Viewer, предоставляющим похожую функциональность.

Откройте программу и выдайте ей все требуемые разрешения.

Далее появится сообщение для настройки показа рекламы – использовать таргетированную или нет. Выберите подходящий вам вариант.

Примите условия использования.

Теперь станет доступен интерфейс приложения, в котором по умолчанию отображается файловый менеджер – перейдите в нём к местоположению целевого HTML и тапните по нему для открытия.

Документ будет запущен в режиме веб-просмотра – так, как страница выглядит в интернете.

Чтобы просмотреть код файла, нажмите на кнопку « ».

Данное приложение похоже на первое нами упомянутое, но в дополнение к режимам просмотра позволяет открывать большие документы. Недостатки у ХТМЛ Ридер/Вьювер также похожи – отсутствует русский язык и есть достаточно навязчивая реклама.

Помимо этой статьи, на сайте еще 12336 инструкций.
Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Источник

Как сделать ссылку на номер телефона в HTML: протокол tel:, оформление и советы

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

Некоторые устройства без проблем понимают написанные телефоны, например, слышал, что в Android для этого достаточно заключить линк в span:

При клике по тексту, в теории, весь номер должен выделиться, но на практике у меня это почему-то не получилось.

Лучше использовать в ссылке tel параметр:

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

Спецификация и поддержка

По факту tel: — это не опция «А» тега, а протокол (такой же как http: или mailto:, отвечающие за линки на веб-страницы и почтовые адреса соответственно). Конкретного и детального его описания в HMTL5, вроде бы, нет, но после принятия данного стандарта в iOS, он стал использоваться повсеместно.

Даже без спецификации многие браузеры вполне адекватно понимают ссылку на телефон в HTML, однако процесс обработки клика встречается разный: начиная от открытия диалогового окна с выбором приложения и заканчивая банальным игнорированием.

Как реагируют типовые программы:

Safari — запускает FaceTime.

Opera (Windows) — в статье-исходнике сказано, что всплывает окно с ошибкой мол нельзя распознать протокол, но у меня лично было предложение открыть Skype (возможно, потому что он установлен).

Opera (OSX) — появляется запрос на использование другого приложения.

iOS — на выбор вам предлагают позвонить, отправить сообщение или добавить в контакты.

Internet Explorer 11 Mobile — инициирует звонок.

Internet Explorer 11 — в оригинальном посте говорится, что появится окно с информацией о вызове какого-то приложения, но у меня в Windows (ПК) просто была ошибка протокола.

Chrome — на декстопе ничего не происходило, но в смартфоне открылось окно со звонком и введенным телефоном.

Edge — запрос на открытие соответствующей программы.

BlackBerry 9900 — пытается инициировать набор номера.

Android — запуск приложения телефона.

Про Firefox ничего сказано не было, но я встречал информацию о возможных ошибках на Win ПК. В комментариях дополнили, что в Mac при этом вызывается FaceTime.

Увы, не все разработчики браузеров для компьютеров (в том числе и непопулярных) позаботились о должной поддержке tel протокола, вероятно, работа над этим будет продолжаться. Хотя без конкретной спецификации она выглядит несколько абстрактной.

Оформление ссылки tel: в HTML

Поскольку линк находится в теге А, то отображение ссылки номера телефона полностью зависит от его стилей. Например, если для А добавили класс phone-style, то будет:

Убираем подчеркивание с text-decoration чтобы элемент выглядел как текст.

Если хотите применить один и тот же стиль всем телефонам на сайте, то пишете:

С помощью псевдо класса before и представления символов в unicode можно добавить небольшую иконку в начале:

Советы по созданию ссылки на номер телефона

Данная фишка для мобильных устройств — громадное преимущество, т.к. является отличным Call To Action маркетинговым инструментом. Посетителю сайта не надо пытаться выделить весь текст, вводить номер по памяти и т.п., он просто кликает в нужном месте, и активная ссылка телефона сделает свое дело. Однако тут есть нюансы.

Определение мобильных устройств

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

Здесь, в зависимости от результата условия в IF, в блоке с создается либо ссылка на телефон с tel:, либо просто HTML текст.

SEO оптимизация

В оригинальной статье есть пример кода контактов для бизнес сайтов, где информация может быть использована в Google выдаче.

Beach Bunny Swimwear

Теоретически, в линке можно еще указать rel=»nofollow».

Убираем автоопределение

Если вы собираетесь внедрять сегодняшний урок в свой шаблон, то вероятнее всего захотите отключить автоопределение телефона в iOS. Как минимум, чтобы система не переопределила существующие стили. Для этого в HEAD дописываете строку:

Итого. Если вы размещаете контактную информацию на сайте, то по умолчанию ссылки на телефоны не открываются — вам нужно использовать специальный протокол tel: в HTML теге А. Опция не имеет четкой спецификации, и поддерживается браузерами слегка «хаотично» — учитывайте это. В заключительной части я указал 3 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.

Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?

Источник

Не работает html5 видео в мобильниках

Вставил фоном html5 видео (видео расположено локально):

HTML

Css

И тут возникла проблема — видео совсем не отражается на мобильных устройствах — просто черный экран, ни на гугл хром (андройд), ни на iphone. Что я сделал не так?

UPDATE

я уже урезал код вот так:

и все равно не работает

UPDATE2

Если вставляю так, то включается плеер и при нажатии на play видео начинает проигрывается, но мне бы видос как фон поставить с loop и autoplay

5 ответов 5

Html должен быть валидным.

В html коде страницы первый тег обязательно должен быть .
А также в head надо указывать, например,

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

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.

Аналогично в Android 4.1+ тоже отключен автоплей. Одним, словом, производители смартфонов озаботились о том, чтобы пользователи не тратили слишком много мобильного интернета.

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

Мои видео — это бывшие флеш-ролики без звука, поэтому добавлен параметр muted. Все параметры, кроме preload могут быть без передаваемых параметров, это корректно.

Ставил опыты, действительно, от валидности сконвертированного видео многое зависит (невадиное не проигрывается).

Вот так будет валидно, попробуйте так, и проблем с плерами быть не должно

Добавьте это в свой код и видео будет работать на телефоне.

video autoplay loop muted playsinline webkit-playinginline

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html html5 video или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Не подключаются стили .css к .html файлу при переносе проекта на смартфон с компьютера

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

Не подключаются стили к файлу index.php
Доброго времени суток. Пытаюсь подключить стили к index.php, но пока успехом не увенчалось. Вроде.

Не подключаются стили css
Доброго времени суток. Недавно начал изучать css и html, и в самом начале столкнулся с проблемой.

Не подключаются стили CSS
Сверстал табличку на html+css на компе. На нем все хорошо открывается, стили подключаются.

Не подключаются стили CSS
Вот начал верстать макет, но не могу понять почему таблица стилей не подключилась, вот участок кода.

Ок. Скинь смартфоновские скриншоты папки проекта, папки стилей и куска HTML кода, где тег link виден.

Добавлено через 2 минуты
А прежде пропиши расширения файлов .html и .css на смарте и проверь на работоспособность.

С работоспособностью всё в порядке. Файл .html открывается в браузере как есть, ведь список и картинка, которая в нём содержится, отображается в браузере. Проблема только со стилями стоит. Но, думаю, проблема не в моём смартфоне.

Вот, кстати, все скриншоты, которые просили:
(использую ES проводник: https://trashbox.ru/link/es-file-manager
Модель смартфона: HUAWEI Y5 2018)

Решение

Проверил то же самое на другой модели смартфона: Xiaomi Redmi 7
Та же самая ситуация, никаких изменений.
Вы, может, заметили то сообщение: я даже этот проект на хост выгрузил, смартфон отображает коректно, как и компьютер (о последнем — как ни странно).
У меня есть предложение: может, Вы помогли бы мне с экспериментом, и попробовали бы проверить всё на своём смартфоне? Может, это наглое предложение, но у меня просто больше смартфонов нету. Если что, извините.

Я скину архив, в архиве папка с проектом. Достаточно будет Разархивировать архив куда-нибудь и сразу открыть главный .html файл. Ответьте, пожалуйста, согласны ли вы или нет?

А вот ссылка на мой выгруженный сайт (не удивляйтесь с его картинки, украл, что под руку попалось. То же и об наполнении ): https://exampleprojectcheck.000webhostapp.com/

Вложения

training.zip (3.68 Мб, 1 просмотров)

Решение

А ведь действительно, Вы правы. На иконке .html файла стоит обозначение, а на файле .css — нет. Сейчас попробую, сразу отпишусь

Добавлено через 7 минут
NTHing, Вы просто ЛУЧШИЙ. Спасибо Вам огромное за решение проблемы, очень большущее. Ещё в придачу крутецкий файловый менеджер посоветовали. Миллион раз благодарен

Не подключаются стили CSS
Скорее всего — я косячу. Посмотрите код пожалуйста, вдруг поймете в чем подвох, лично я не.

Источник