Javascript 打字机效果不适用于手机。使用引导4

我是一个初级程序员，主要停留在Bootstrap4和CSS中。我现在冒险进入JS，我创建了一个似乎无法修复的bug/monster

我想把打字机的效果添加到我的主页上。我把它放在我的笔记本电脑上，然后我把它推到github上，一切看起来都很好，直到我试图在我妻子的iphone上展示它，但它不起作用（Face Palm）

我似乎无法准确指出为什么它不能在移动设备上工作。我尝试了一些检查，比如pingdom，看看这个网站是否太大，手机无法加载，但事实似乎并非如此

如果有人能看一看，我将不胜感激

var TxtType=函数（el、toRotate、句点）{
this.toRotate=toRotate；
this.el=el；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
这个。勾选（）；
this.isDeleting=false；
};
TxtType.prototype.tick=函数（）{
var i=this.loopNum%this.toRotate.length；
var fullTxt=this.toRotate[i]；
如果（这是删除）{
this.txt=fullTxt.substring（0，this.txt.length-1）；
}否则{
this.txt=fullTxt.substring（0，this.txt.length+1）；
}
this.el.innerHTML=''+this.txt+''；
var=这个；
var delta=200-Math.random（）*100；
如果（这是删除）{
delta/=2；
}
如果（！this.isDeleting&&this.txt===fullTxt）{
delta=这个周期；
this.isDeleting=true；
}else if（this.isDeleting&&this.txt==''）{
this.isDeleting=false；
这个.loopNum++；
δ=500；
}
setTimeout（函数（）{
那。勾选（）；
}，三角洲）；
};
window.onload=函数（）{
var elements=document.getElementsByClassName（'typewrite'）；
对于（var i=0；i.wrap{border right:0.08em solid#fff}”；
document.body.appendChild（css）；
};
正文{
字体系列：“Roboto”，无衬线；
}
navbar先生{
字号：18px；
}
海军陆战队{
垫面：1米；
}
.navbar nav>li{
左侧填充：20px；
右边填充：20px；
}
.背景1{
背景图片：url（./assets/images/back1.png）；
背景尺寸：封面；
垫底：0%；
}
.背景2{
背景图片：url（./assets/images/back2.png）；
背景尺寸：封面；
}
.英雄{
最小高度：100%；
/*浏览器的回退不支持vh单元*/
最小高度：100vh；
/*这两行算作一行：-）*/
右侧填充：1em；
左：1米；
显示器：flex；
对齐项目：居中；
}
heroText先生，
heroButton先生，
.潜台词{
填料顶部：.4em；
}
.工作原理{
垫底：3%；
}
#文本颜色{
颜色：#102D47；
}
.英雄{
颜色：#102D47；
垫面：5em；
垂直对齐：中间对齐；
}
heroText先生{
字体大小：50px；
字号：900；
颜色：#102D47；
}
#希律文{
字体大小：50px；
字号：900；
颜色：#102D47；
}
赫罗巴顿先生{
背景色：#102D47；
颜色：白色；
}
.潜台词{
垫面：1米；
垫底：5em；
字体大小：25px；
颜色：#102D47；
}
.工作原理{
背景图片：url（./assets/images/defestment_light.png）；
右：10%；
左：10%；
}
英雄先生{
颜色：#102D47；
}
.英雄特征{
字号：200；
字体大小：20px；
颜色：#102D47；
}
.受试者头灯，
.主题标题左{
垫面：1.9em；
字体大小：35px；
字号：900；
颜色：#102D47；
}
.主题页脚{
字体大小：25px；
颜色：白色；
}
.页脚文本{
颜色：白色；
}
.受试者头部接触{
垫面：1%；
字体大小：25px；
颜色：#102D47；
}
.录像科{
垫面：2米；
垫底：2米；
}
.页脚{
背景色：#102D47；
}
/*报名表*/
.报名{
背景：url（./assets/images/leadbackup.png）
}
/*了解更多信息部分*/
.主要地区{
背景色：#20812d；
}
.签名盒{
背景色：白色；
利润率最高：3%；
利润底部：3%；
垫底：8%；
}
签名者{
字体大小：30px；
字号：800；
垫面：4%；
}
.signUpSub{
字体大小：20px；
字体大小：400；
利润率最高：-4%；
}
.teamPic{
宽度：40%；
左缘：30%；
}
.人{
边界半径：40px；
边框：浅灰色实心1px；
}
@仅介质屏幕和（最大宽度：767px）{
.受试者头灯，
.受试者头左，
.我走了，
.好吧{
文本对齐：居中；
}
霍维姆先生{
填充顶部：0px；
垫底：0px；
}
.受试者头灯，
.主题标题左{
填充顶部：0px；
字体大小：22px；
}
.我走了，
.好吧{
左：2%；
右：2%；
}
.登记箱{
左：10%；
右：10%；
}
}
@仅介质屏幕和（最小宽度：1000px）{
heroText先生{
字体大小：72px；
}
}
.登记箱{
垫面：3em；
垫底：3em；
背景图片：url（./assets/images/leadbackup.png）；
背景尺寸：封面；
}
.数据框{
边框：rgb（178178178）2倍实心；
背景色：rgba（122、122、122、0.388）；
垫面：1米；
垫底：1米；
宽度：100%；
}
.铅垂试验{
垫面：2米；
}
.铅垂头{
字号：900；
}
.注册{
字体大小：25px；
字号：900；
}
.textInfo{
左：3em；
右侧填充：3em；
}
.数据框{
边界半径：13px；
}
.提交{
背景色：#102D47；
宽度：40%；
边框：lightsteelblue 3px纯色；
}
* {
颜色：#102D47；
文字装饰：无；
}

更好的市场营销


网站设计，潜在客户开发