0571-88730320

【web优化】移动web开发与优化综述

【web优化】移动web开发与优化综述

发布时间:2020-03-24 09:00:00

到目前为止,在互联网行业,手机的智能化程度越来越高,移动终端的比重也越来越高,特别是在电子商务、新闻、广告、游戏等领域。用户要求越...

如果您有类似需求请致电

17742004931 , 0571-88730320

到目前为止,在互联网行业,手机的智能化程度越来越高,移动终端的比重也越来越高,特别是在电子商务、新闻、广告、游戏等领域。用户要求越来越高,网站功能越来越好,效果越来越酷,这就要求我们的产品质量越来越高。

Web前端开发是一个挑战、一个问题、一个机遇。如何使我们的移动网页具有更好的交互性体验是本文的主要目的:对移动web开发中存在的问题和优化进行总结。这只是一个坑,我知道当我发展。如果你遇到其他的坑,请加上它,或者想一想我写错了哪里,请给我一些建议!

以下两个是针对IOS上safari的地址栏和顶部样式栏(我的手机是Android,没有经过仔细测试,但都是添加的)

附言:互联网上说手机的耗电量会增加。我也在手机上试过。确实是一样的。当我看博客的时候,在5分钟内大约减少1%,在3分钟内使用硬件加速时大约减少1%。请注意合理使用。

顺便说一句,这里有两个关于动画或过渡的建议:在手机上(事实上,PC也是如此)。CSS3动画或过渡应该尽可能使用变换和不透明度,而不是左上角。如果动画和转换可以由CSS3解决,请不要使用js。如果是复杂的动画,可以用CSS3+JS(或者HTML5+CSS3+JS)来配合开发,效果只是出乎意料,并非不可能。

单击事件将延迟300毫秒等待确认是否为双击事件(如果两个单击事件之间的间隔小于300毫秒,则将其视为双击事件)。经验不好。现在,***个解决方案是使用touchstart或touchend,而不是单击。或者封装tap事件以替换click事件。所谓的tap事件由touchstart事件+touchmove(判断是否滑动事件)+touchend事件封装组成。

对此不应该有任何解释,也就是说,不要在不发送请求的情况下发送请求。对于一些小图标(我通过将低于8K的图标转换为Base64来实现),可以使用Base64来减少请求的发送。尤其是在移动端,请求非常宝贵。在网络速度不好的情况下,请求是宝贵的。

对于整个网站来说,图片是流量***的资源之一。如果可以使用的话就不适用了。图标可以替换为Base64编码、字体图标、SVG等。要使用它们,需要选择最合适的格式、大小,然后进行压缩——这里推荐腾讯推出的智慧地图。PS:图像尺寸的过度压缩会影响图像的显示效果,可能会使图像变得模糊。一般来说,质量是60左右!

***个屏幕加载的速度直接影响用户的体验。建议在用户需要时加载非***屏幕图像资源。这可以极大地优化***个屏幕加载,并减少***个屏幕加载所需的时间!PS:延迟加载频繁使用JS操作DOM,会导致大量重绘和渲染,影响性能。

显示图片有两种方法,一种是用图片标签显示图片,另一种是用背景图片显示图片!这是两者的区别。IMG:html中的标签IMG是web页面结构的一部分,在加载结构的过程中,它将与其他标签一起加载。背景:CSS背景图像中存在的图像背景将等待结构加载(网页内容完全显示后),即网页首先加载标签img的内容,然后加载背景图像引用的图像。如果引入图片,则在加载图片之前不会显示img之后的内容。背景用于引入相同的图像。加载网页的结构和内容后,将加载背景图像。网页内容可以正常浏览,但看不到背景图像。对于这两种,我们根据习惯、需求等权重因素来选择!

在IOS上,如果有本地滚动,则需要添加此属性!如果不加,滚动起来会很慢,似乎会有一种卡对卡的感觉。

但是,添加此选项后,IOS上将出现错误。

FB box是一个很大的div,它包含页面上的所有元素,包括弹出窗口。你看到的对话框img,高度:100%;-WebKit溢出滚动:touch;位置:relative;

要定位,您需要-WebKit overflow scrolling:touch;也需要,但是这样,IOS中就会有一个bug。当页面滚动一定距离后,点击显示弹出窗口,然后关闭它,你会发现弹出窗口的一部分仍然“留在页面上”。

布局弹出式div和。FB盒以兄弟节点的形式出现,并在外层做另一个div来包装它们。即使坑是高的,效果如下

FB盒移除位置:相对;。让弹出的div指的是身体的位置!

固定元素在IOS下容易出现定位错误。当软键盘弹出时,会影响固定元件的定位,产生元件错位(滚动和恢复),有时会出现屏幕闪烁的效果。我也搜索了这个问题,发现其他人遇到了我没有遇到的问题!是真的,啊~。所以在手机上,不建议使用固定定位,而应该***定位!如果你一定要用的话,你必须在写完后测试几次!

附言:我这几年发展出了这个问题。如果不添加此代码,它似乎没有任何影响。但我以前要求,但现在不加了,也没有任何反馈!

附言:我不使用任何库来滑动。我根据touchstart和touchend之间的移动距离判断它是左右滑动还是上下滑动!

但分享后的实际连接是:其他人点击分享的链接不会打开网页

苹果的新手机,出了短时间,笑话就不会坐,各种各样的笑话,但今天我们谈的就是这个!让我们谈谈iPhone x给前端和用户界面带来的麻烦吧!接下来,我们将介绍一个来自沙漠、张新旭等地的iphonexqiliuhai的解决方案!该跳的时候就不要跳!

以上都是遇到的具体问题。


联系我们,谈您的需求

立即咨询