Прежде всего, я впервые пишу статью на этой платформе.Если есть какие-то недостатки, пожалуйста, дайте мне несколько советов, спасибо. [PS: я маленький белый]
задний план
Участвовал в проекте смешанной разработки нативного APP и h5 в компании.Я руководил частью проекта h5.Сейчас проблемы, возникающие в проекте, резюмируются следующим образом:
Конкретные вопросы
Проблема 1: проблема с полосой прокрутки страницы
описание проблемы
Веб-страница имеет полосы прокрутки при просмотре в браузере ПК, однако при открытии мобильного браузера полос прокрутки нет.
Решение
Установите самый внешний слой страницы (обычно я пишу большой контейнер в теге body для хранения содержимого страницы) на самом внешнем слое страницы. Установите переполнение: авто/прокрутка; и не могу установить значение атрибута высоты. (высота: 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 реализует привязку событий
Примечание: метод 1 и метод 2 являются собственными JS, использующими addEventListener для реализации мониторинга событий; и когда элементы dom используют события touchstart и touchend, их необходимо использовать в сочетании с привязкой событий или мониторингом событий, иначе часть js выдаст исключение.
код
//法一：
document.getElementById('list5').addEventListener('touchstart',callback, false);
document.getElementById('list5').removeEventListener('touchstart',callback, false);
document.getElementById('list5').addEventListener('touchend',callback, false);
document.getElementById('list5').removeEventListener('touchend',callback, false);
//法二：
document.getElementById('list5').addEventListener('touchstart',function(e){
e.preventDefault();
}, 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: none;
user-select: none;
Вопрос 4: проблема с 1px на мобильных устройствах
описание проблемы
Поскольку разные мобильные телефоны имеют разную плотность пикселей, 1 пиксель в CSS не равен 1 пиксель в мобильных устройствах. В проекте используются js и rem для экранизации мобильного терминала, поэтому генерируется ситуация 0.5px, так что нижняя версия мобильника не может отображать границу 0.5px.
Решение
Используйте css, чтобы решить проблему с 1px, и напишите непосредственно в элемент dom, который должен быть установлен в 1px: border-width: 1px;
код
//HTML部分：
<div class='class1'></div>
//css部分：
.class1{
border: 1px solid #ccc;
}
//css部分
/*移动端正常展示1px的问题 start*/
%border-1px{
display: block;
position:absolute;
left: 0;
width: 100%;
content: ' ';
}
.border-1px{
position: relative;
&::after{
@extend %border-1px;
bottom: 0;
border-top: 1px solid #ccc;
}
&::before{
@extend %border-1px;
top: 0;
border-bottom: 1px solid #ccc;
}
}
@media (-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);
}
}
}
/*移动端正常展示1px的问题 end*/
- Решение 2 для проблемы 1PX:
.c-activityForm-addPrizeBtn{
display: flex;
width: 100%;
height: 0.60rem;
justify-content: center;
align-items: center;
border: none;
border-radius: 0.10rem;
box-sizing: border-box;
color: #454545;
font-size: 0.24rem;
margin-top: 0.10rem;
position: relative;
}
.c-activityForm-addPrizeBtn:after{
content: '';
position: absolute;
left: 0;
top: 0;
border: 1px solid #C3C3C3;
border-radius: 0.10rem;
width: 199%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
Ссылка на ссылку:Woohoo. Основной 51.net/HTML5/62711…
Проблема 5: js не может правильно проанализировать значение параметра, URL которого содержит знак «=»
описание проблемы
Проект, поскольку значение параметра запроса данных является значением параметра, полученному из адресов URL, и значение параметра «=« номер не может быть разрешен в правильное значение параметра (PS: JS PARAMETER »=« Количество разделенного URL)
Решение
Перекодируйте URL-адрес, а затем декодируйте его [В этом проекте сторона приложения предоставляет перекодированный URL-адрес, а внешний интерфейс использует плагин geturlparams для получения значения параметра URL-адреса]
код
//解码"="号
dom.token = decodeURI($.query.get("token"));//插件
//获取无需解码的值
dom.msgid = $.query.get("msgid");
адрес плагина geturlparams
Вопрос 6: Мониторинг событий нативного js и привязка событий jquery недействительны в ios
описание проблемы
При использовании мониторинга событий или привязки событий запуск события в ios недействителен, поскольку родительский элемент выбирает элемент body или document.
Решение
Не используйте элементы body и document в качестве родительских элементов
Проблема 7: Дата отображается как NaN в ios
Описание проблемы 1
Формат даты Date, есть проблема совместимости в ios, дата ios будет отображаться как: NaN
Решение 1
Решение: Поддержка формата «2017/12/26 19:36:00» в ios, но не формата «2017-12-26 19:36:00», последний формат отображает Nan в ios (в Android может отображаться нормально)
код 1
var time = "2017-12-26 19:36:00";
time = time.replace(/\-/g, "/");//将时间格式的'-'转成'/'形式，兼容iOS
Описание проблемы 2 [20180709]
Формат времени, предоставленный в фоновом режиме, имеет суффикс «.0», что приводит к сбою синтаксического анализа ios, отображение даты ios: проблема NaN
Решение 2
Решение: удалите суффикс «.0» из формата времени.
код 2
var time = "2018-07-09 09:13:53.0";
//法一：
time = time.substr(0,time.length-2); //解决时间后面缀有.0的情况【去掉.0】
//法二：
time = time.slice(0,time.indexOf(".")); //本人使用此方法
Вопрос 8: Событие click имеет проблемы в ios
описание проблемы
Когда событие щелчка запускается щелчком ios, будет выбран модуль родительского элемента делегата события [т. е. из-за всплытия события, а родитель имеет стиль по умолчанию], и есть прозрачный слой, такой как
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
Анализ: например, когда пользователь ios нажимает «элемент списка 1», ul родительского слоя будет иметь прозрачный стиль.
Решение
Добавить e.stopPropagation();//остановить всплытие
Если вы все еще не можете решить проблему, вы можете изменить ее, чтобы коснуться события
20180904 新增
Вопрос 9: [Вмешательство] Невозможно предотвратить Default внутри пассивного прослушивателя событий, поскольку цель рассматривается как пассивная.
описание проблемы
Недавно я работаю над общедоступной учетной записью WeChat, используя компонент JQuery WEUI для реализации функции обновления раскрывающегося списка.Код выглядит следующим образом. Но когда запускается событие раскрывающегося списка, консоль браузера выдает
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>эта ошибка
$(document.body).pullToRefresh(function(){
//下拉刷新的代码
});
Решение
добавить это в css
* { touch-action: none; }Вот и все. Тем не менее, мышь может прокручивать, но не на мобильной стороне. Хахаха, снова наступил на яму.
20190416 新增
описание проблемы
Расположение остатка мобильного терминала, проблема позиционирования карты Sprite
Решение
использовать
百分比(%)способ реализован.
Принцип расчета: ширина спрайта W, высота H, ширина иконки w, высота h, координаты иконки в спрайте (x, y), координаты в процентах ( м, н):
Формула расчета: m = x/(W-w)*100%, n = y/(H-h)*100%
Инструмент онлайн-генерации карты спрайтов:woohoo.topthem.com/developers/…
Справочная ссылка для «rem layout, проблема позиционирования карты спрайтов»:
описание проблемы
Нажмите кнопку «Назад» в браузере/мобильном терминале, страница не обновляется.
Решение
// Нажимаем кнопку возврата в браузере, страница не обновляется
window.addEventListener('pageshow', function (event) {
location.reload();
//event.persisted属性为true时，表示当前文档是从往返缓存中获取
/* if (event.persisted) location.reload(); */
/* if (event.persisted){
location.reload();
}else{
location.reload();
} */
});
20200619 新增
Проблема: Поле ввода ввода размещено вверху панели вкладок, и панель вкладок можно прокручивать по горизонтали.В IOS проблема с переключением стиля панели вкладок (Android в норме)
Описание: Поле ввода ввода размещено в верхней части панели вкладок, а панель вкладок можно прокручивать по горизонтали.В IOS проблема с переключением стиля панели вкладок, выбранное состояние первой вкладки панели панель вкладок всегда выбрана, а вторая вкладка всегда не выбрана Эффект [Примечание: только первая вкладка в проекте имеет поле ввода. Другие формы не тестировались]
Решение:
- Способ 1. Переместите поле ввода в нижнюю часть вкладки.
- Способ 2: при переключении вкладки "показать и скрыть" поле ввода обрабатывается с задержкой
//代码示例：
setTimeout(function() {
//alert(choose);
if ("join"==choose) {
$(".ay-search-btn").show();
}else {
$(".ay-search-btn").hide();
}
}, 300);
Примечание. Вышеуказанные два метода были протестированы и являются нормальными.
Проблема: при прокрутке страницы IOS происходит зависание
Решение
-webkit-overflow-scrolling: touch!important; /Проблема проскальзывания страниц на IOS/
.content-wrap{
width: 100%;
height:100%;
overflow:auto;
box-sizing: border-box;
-webkit-overflow-scrolling: touch!important; /*IOS 上页面滑动的卡顿问题*/
}
Суммировать
Выше приведены проблемы и решения, с которыми я столкнулся, когда завершил проект [PS: когда я столкнулся с проблемой, я искал и ссылался на множество отличных методов решения проблемы, еще раз спасибо], если не хватает письменности , Добро пожаловать отметить, спасибо.