В компании я участвовал в смешанном проекте разработки нативного приложения и h5. Я отвечал за h5-часть проекта. Я резюмирую проблемы, возникшие в проекте, следующим образом:
конкретные вопросы Вопрос 1. Проблема с полосой прокрутки страницы.Описание проблемы
На веб-странице есть полосы прокрутки при просмотре в браузере ПК, однако при открытии в браузере мобильного устройства полоса прокрутки отсутствует;
Решение
Установите самый внешний слой страницы (когда я пишу страницу, я обычно пишу большой контейнер в теге body для хранения содержимого страницы) set overflow:auto/scroll; и не могу установить значение атрибута высоты ( высота:100% Ни в коем случае)
пример
<body> <div style=overflow:scroll/auto;> //Содержимое веб-страницы</div></body>Вопрос 2. Использование событий Touchstart и Touchend.
Описание проблемы
Когда вводится файл touch.js и события touchstart и touchend используются для достижения интерактивных эффектов, на некоторых мобильных телефонах возникает проблема сбоя запуска событий [например: мобильные телефоны Honor низкой версии]
Решение
Способ 1: используйте RemoveEventListener и addEventListener вместе
Способ 2. Добавьте e.preventDefault(), чтобы некоторые мобильные телефоны не прыгали по умолчанию;
Метод 3: Jquery on реализует привязку событий
Примечание. Метод 1 и метод 2 являются собственным JS, использующим addEventListener для реализации прослушивания событий, и когда элемент dom использует события touchstart и touchend, его необходимо использовать в сочетании с привязкой событий или прослушиванием событий, иначе часть js выдаст сообщение; исключение.
код
//Метод 1: document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById(' list5').addEventListener('touchend', обратный вызов, false);document.getElementById('list5').removeEventListener('touchend',callback, false);//Метод 2: document.getElementById('list5').addEventListener('touchstart',function(e){ e. предотвратитьПо умолчанию();}, false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false); Вопрос 3: Проблема сбоя при длительном нажатииВосстановление сценария
Имеется страница списка XXX. При длительном нажатии элемента списка на странице списка (касании текста) на мобильных телефонах низкой версии произойдет сбой.
Решение
js-часть: добавьте e.preventDefault() при срабатывании события, чтобы предотвратить поведение по умолчанию;
css-часть: добавьте код, запрещающий копирование текста
код
//часть js: e.preventDefault(); //часть CSS: -webkit-touch-callout: none; //Решение сбоя //Отключить копирование -moz-user-select: none;-khtml-user-select: нет; выбор пользователя: нет;Вопрос 4: Проблема с 1px на мобильном терминале
Описание проблемы
Поскольку разные телефоны имеют разную плотность пикселей, 1 пиксель в CSS не эквивалентен 1 пикселю на мобильных устройствах. В проекте для адаптации экрана мобильных устройств используются js и rem, поэтому возникает ситуация с размером 0,5 пикселя, в результате чего младшая версия мобильного телефона не может отображать границу 0,5 пикселя.
Решение
Используйте css, чтобы решить проблему с 1 пикселем, и напрямую напишите: border-width:1px для элемента dom, для которого необходимо установить значение 1 пиксель;
код
//HTML-часть: <div class='class1'></div>//css part: .class1{ border: 1px Solid #ccc;}//css part/*Проблема с нормальным отображением 1 пикселя при запуске мобильного терминала */% border-1px{ display: Block; Position: Absolute; Left: 0; Ширина: 100%; Content: ' ';}.border-1px { Position: относительная; &::after { @extend %border-1px; нижняя граница: 0; граница сверху: 1 пиксель сплошной #ccc; } &::before { @extend %border-1px; верхняя граница: 1 пиксель сплошной #ccc; webkit-min-device-pixel-ratio:1,5),(min-device-pixel-ratio:1,5){ .border-1px{ &::after { -webkit-transform: ScaleY(0,7); Transform: ScaleY(0,7) }}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio); :2){ .border-1px{ &::after{ -webkit-transform: ScaleY(0,5); Transform: ScaleY(0,5); }}/*Проблема нормального отображения 1пикселя на мобильном терминале*/ Проблема 5: js не может правильно проанализировать значение параметра URL-адреса, содержащего знак =Описание проблемы
В проекте, поскольку значение параметра запроса данных получается из URL-адреса, а значение параметра содержит знак =, значение параметра не может быть правильно проанализировано (ps:js использует знак = для разделения параметров URL-адреса). )
Решение
Перекодируйте URL-адрес, а затем декодируйте его [В этом проекте приложение предоставляет перекодированный URL-адрес, а внешний интерфейс использует плагин geturlparams для получения значения параметра URL-адреса]
код
//Декодировать = число dom.token = decodeURI($.query.get(token)); //Плагин //Получить значение без декодирования dom.msgid = $.query.get(msgid);Вопрос 6. Нативное прослушивание событий js и привязка событий jquery недействительны в ios
Описание проблемы
При использовании прослушивания событий или привязки событий запуск событий в iOS недействителен, поскольку родительский элемент выбирает элемент тела или документа.
Решение
Не используйте элементы body и document в качестве родительских элементов.
Вопрос 7: Дата отображается как NaN в iosОписание проблемы
Формат даты Date имеет проблемы совместимости в ios. Дата в ios будет отображаться как: NaN.
Решение
Решение: 2017/12/26 19:36:00 поддерживается в ios, но формат 2017-12-26 19:36:00 не поддерживается. Последний формат отображает Nan в ios (в Android он может отображаться нормально)).
код
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);//Преобразуем '-' в формате времени в формат '/', совместимый с iOSВопрос 8: Возникла проблема с событием клика в ios
Описание проблемы
Когда событие щелчка инициируется щелчком iOS, модуль родительского элемента делегирования события будет выбран [то есть: из-за всплытия событий и родительский элемент имеет стиль по умолчанию], и будет, например, прозрачный слой
<ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li></ul>
Анализ: например, когда пользователь iOS щелкает элемент списка 1, UL родительского слоя будет иметь прозрачный стиль.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.