написать впереди
В эпоху мобильной разработки фронтенд-студенты только что попрощались с лысым браузером IE, но обнаружили, что долгожданная эра мобильного Интернета не так прекрасна, как представлялось. Всякие острые проблемы совместимости систем и браузеров никого не радуют. Как фронтенд-программист, проработавший менее 3 лет, я всегда считаю, что хорошая память не так хороша, как плохое письмо. Каждый раз, когда я наступал на яму в процессе разработки проекта, я по привычке фиксировал это. Я был немного удивлен, когда посмотрел на него вчера. Так что делитесь им, я надеюсь, что это может быть полезно для всех.
проблемы со стилем
1. Родительский элемент установил радиус границы, дочерний элемент применил преобразование, а родительский элемент установил переполнение: скрытый, но он недействителен?
// 给父元素设置
{
position:relative;
z-index:1;
}
2. Установите цвет заполнителя текстового поля ввода.
input::-webkit-input-placeholder{
color:rgba(144,147,153,1);
}
3. Как установить цвет фона тела, высота: 100%, не действует?
同时设置html，body的高度
html,body{
height:100%；
}
或
body{
height: 100vh; // 代表占屏幕100%
}
4. Проблема однопиксельных границ
.row {
position: relative;
&:after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 200%;
border-bottom:1px solid #e6e6e6;
color: red;
height: 200%;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(0.5);
transform: scale(0.5);
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
}
}
5. CSS-свойство touch-action: нет;
该属性会导致安卓页面无法滚动，慎用!
6. Удалите внутреннюю тень поля ввода на мобильном телефоне ios.
input{
-webkit-appearance: none;
}
7. В div мобильного телефона Android есть слой div, а текст отображается не по центру.
最好给div设置padding ，不固定高度和不设置line-height；
8. Курсор поля ввода ввода на стороне iOS неуместен
Это вызвано фиксированным позиционированием и решается путем изменения на абсолютное.
.box{
position: absolute;
}
9, div одновременно реализует наличие цвета фона и фонового изображения.
{
background-color: #fff;
background-image:url('../../assets/img/model-bg.png');
background-repeat: no-repeat;
}
10. CSS делает эллипс
Горничный радиус может установить горизонтальный и вертикальный радиус отдельно, просто отделите два значения в слеш (/).
Кроме того, нам также необходимо знать, что border-radius может принимать не только значения длины, но и процентные значения.
{
width: 150px;
height: 100px;
border-radius: 50%/50%; //简写属性：border-radius:50%
background: brown;
}
11. Картинка отображается по центру
object-fit: cover;
Проблемы совместимости
1. Проблема, заключающаяся в том, что шрифт iconfont не может быть загружен (или искажен) в приложении DingTalk. Когда вводится шрифт iconfont, шрифты необходимо импортировать последовательно. Правильный порядок следующий:
@font-face {
font-family: "djicon";
src: url('./iconfont.eot'); /* IE9*/
src: url('./iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */
url('./iconfont.woff') format('woff'), /* chrome、firefox */
url('./iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
// 参考文档：https://www.cnblogs.com/Megasu/p/4305116.html
2. Проблемы с копирайтингом и растяжкой изображения, отредактированные редактором на стороне ПК, фон — бэкенд, возврат — html-фрагмент.
Узел - модуль Cheerio, удобнее работать домо-строки DOM, фактический случай:
Решена проблема с отображением изображений со стороны ПК на мобильном терминале Справочные документы:
woo woo Краткое описание.com/afraid/oh 6 из 73 из 8 раундов…
Уууу, эта лошадь plus.com/package/cars…
width: number = 784 代表pc端宽度
regHtml(str: string){
// 参数是html片段
let _this = this;
const $ = cheerio.load(str);
$('img').each(function(index,element){
let attr = element.attribs //元素的属性
// 屏幕宽度
let docEl = document.documentElement
let clientWidth = docEl.clientWidth
if(attr.width){ //如果设置了宽
// 图片宽度/屏幕宽度的比例
let rate = attr.width /_this.width
//图片的宽高比例
let wh = attr.width/attr.height
$(element).attr('height', _this.rate*clientWidth/wh)
$(element).attr('width', _this.rate*clientWidth)
$(element).attr('style', '')
$(element).attr('class', 'img-skew')
}
})
return $.html()
}
3. При нажатии кнопки IOS проблема не фокусируется.
В системе ios, когда я нажимаю поле ввода ввода, нет ответа, курсор не может быть собран, и клавиатура не может быть настроена.
Решение. Принудительно добавьте событие щелчка и сфокусируйте курсор на поле ввода после щелчка.
cilckTextarea(){
document.getElementsByClassName('cont-inp')[0].focus();
},
4. Загрузить изображения, iPhone7 iPhone7p не может передать имя изображения при загрузке изображения
Решение: вручную добавить имя изображения
let data = new FormData();
data.append("fileName", file[0],file[0].name);
5. Страница скользит вверх после всплывающей клавиатуры, когда ios WeChat открывает веб-страницу, в результате чего область отклика кнопки во всплывающем окне смещается.
Решение: Вручную прокрутите полосу прокрутки вниз и напишите пользовательскую команду.
import Vue from 'vue';
Vue.directive('blur', {
'bind'(el) {
el.addEventListener("click", function(){
window.scrollTo(0,0);
})
}
});
//在点击页面提交按钮的时候，把滚动条滚到底部就OK了
6. После настройки шрифта браузером WeChat страница смещается.
Решение. Предотвратите автоматическое изменение размера шрифтов страниц.
// 安卓：
(function() {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
//IE浏览器，非W3C规范
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})();
//iOS：
// ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;}
7. Вопросы о совместимости мобильного стиля
- Установите атрибут viewport метатега так, чтобы он игнорировал реальное разрешение устройства и напрямую передавал dpi для сброса разрешения между физическим размером и браузером, чтобы добиться эффекта однородного разрешения. и отключить пользовательский зум
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
- Используйте rem для экранной адаптации, установите размер шрифта корневого элемента, а затем во время разработки измените все макеты, связанные с пикселями, на единицы rem.
8. В iOS отмените использование заглавной буквы по умолчанию для первой буквы английского языка при вводе.
<input type="text" autocapitalize="none">
9. Запретите iOS идентифицировать длинные строки номеров как телефонные звонки.
<meta name="format-detection" content="telephone=no" />
10. Запретить пользователям iOS и Android выделять текст
-webkit-user-select: none;
11. В некоторых случаях событие клика отслеживается для некликабельных элементов, таких как (метка, диапазон), которые не будут запускаться под ios.
Нужно только добавить строку кода к элементу CSS, не запускает событие Click:
cursor: pointer;
инструменты отладки
1. Инструмент удаленной отладки Weinre
Простые шаги:
- 本地全局安装weinre , 命令行：npm install -g weinre
- 在本地启动一个检测器：weinre --boundHost 1.2.3.4 （IP为本地IP地址）
- 在浏览器访问此地址：http://1.2.3.4:8080
- 把下面这一串东西，放在你需要调试的页面里：
<script src="http://1.2.3.4:8080/target/target-script-min.js#anonymous"></script>
- 点击链接打开：http://1.2.3.4:8080/client/#anonymous
2. печать журнала vconsole
import VConsole from 'vconsole'
var vConsole = new VConsole();
3. Fiddler также должен поддерживать https для захвата пакетов.
Решение: Fiddler необходимо установить сертификат доверия, телефон также должен установить сертификат доверия, открытый в браузере.
http://1.2.3.4:8888 // 本地IP地址+端口号
4, Чарльз захватывает сторону мобильного телефона, вам необходимо установить сертификат
手机浏览器输入：chls.pro/ssl ，去下载证书。
手机-设置-安全与隐私-更多安全下载-从sd卡安装证书 - 找到之前在浏览器下载的证书
проблемы, связанные с vue
1. Как vue получает высоту изображения после извлечения данных?
<img
:src="userInfo.profilePicture"
alt
class="img-picture"
v-if="userInfo.profilePicture"
ref="myImg"
@load="imageFn"
>
imageFn() {
console.log(this.$refs.myImg.offsetHeight);
console.log(this.$refs.myImg.offsetWidth);
},
2. Для одной и той же ноды dom в vue одновременно использовать v-if и v-for не рекомендуется.Официальный ответ:
Совместное использование v-if и v-for не рекомендуется. Когда v-if используется с v-for, v-for имеет более высокий приоритет, чем v-if
3. После изменения значения атрибута элемента в vue v-for, v-show не вступает в силу
添加this.$forceUpdate();进行强制渲染，效果实现。
因为数据层次太多，render函数没有自动更新，需手动强制刷新。
4. Эта защита от выхода обычно используется для предотвращения внезапного ухода пользователя без сохранения изменений. Навигацию можно отменить с помощью next(false)
beforeRouteLeave(to, from, next) {
if (to.path === '/votes/subject') {
next('/task-list');
} else {
next();
}
}
5. Решение для передачи пользовательских параметров пользовательского интерфейса элемента
Привязанный параметр handleSelect по умолчанию здесь — это выбранный фрагмент данных. Если на странице несколько одинаковых компонентов, хотите знать, какой из них выбрать?
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
решение:
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="((item)=>{handleSelect(item, index)})"
// 写个闭包就可以了，index表示第几个组件
></el-autocomplete>
6. Электронный ввод фреймворка element-UI не может инициировать событие @key.enter.
<el-input v-model="form.loginName"
placeholder="账号"
@keyup.enter="doLogin">
</el-input>
Решение: используйте @key.center.native
<el-input v-model="form.loginName"
placeholder="账号"
@keyup.enter.native="doLogin">
</el-input>
наконец
Вышеизложенное - это все то, что фронтенд-леди резюмировала в небольших книгах за последние два года. Конечно, я считаю, что наши фронтенд-даосы видели сильные ветры и волны. Добро пожаловать на общение в области комментариев и поделитесь ценным опытом! о(￣︶￣)o