本篇内容主要讲解“Web前端必知的优化技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Web前端必知的优化技巧有哪些”吧!
原生应用没有,移动浏览器有。当你单击任何按钮或任何可单击的对象(例如图标)时,使用Safari或Chrome浏览器的用户将看到阴影单击效果。
但是,如果您的网站实际上已经足够响应并包含加载数据的效果了怎么办?或者您使用Angular,React或Vue,并且很多UX交互是瞬时的?阴影单击效果可能会影响您的用户体验。
你可以在样式表中使用以下代码来摆脱这种阴影单击效果。不用担心,即使您需要将其作为全局样式添加,它也不会破坏其他任何内容。
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0);}
我不是在谈论针对宽度小于600px的设备放弃特定于样式表的 @media 代码。相反。您应该始终使用样式表来使网站移动友好。
但是,如果要根据用户是否在移动设备上显示其他效果,该怎么办?你希望将它包含在JavaScript函数中——并且您不希望在用户更改其智能手机方向(将宽度增加到600px以上)时更改它。
对于这种情况,我的建议是使用可全局访问的Helper函数,该函数根据浏览器的用户代理确定用户设备是否为移动设备。
$_HelperFunctions_deviceIsMobile: function() { if (/Mobi/i.test(navigator.userAgent)) { return true; } else {return false; } }
如果你使用大图像,并且想要确保移动设备上的加载时间仍然适合你的移动用户,请始终加载不同版本的图像。
在你的CSS文件中,定义 mobile-only 和 nomobile。
.mobile-only { display: none; }@media (max-width: 599px) { ... .nomobile {display: none;} .mobile-only {display: initial;}}
如果您有大型列表,则应考虑在用户向下滚动时延迟加载更多数据,而不是显示“加载更多或显示更多”按钮。原生应用程序通常包括这样的延迟加载的无限滚动功能。
在移动web中使用Javascript框架实现这一点并不难。您可以在模板中的元素上添加引用($ref)或仅依赖于窗口的绝对滚动位置。
以下代码显示了如何在Vue应用中实现这种效果。可以在其他框架(例如Angular或React)中添加类似的代码。
mounted() { this.$nextTick(function() { window.addEventListener('scroll', this.onScroll); this.onScroll(); // 需要初始加载页面 }); },beforeDestroy() { window.removeEventListener('scroll', this.onScroll);}
如果用户滚动到某个元素或页面底部,则onScroll函数将加载数据:
onScroll() { var users = this.$refs["users"]; if (users) { var marginTopUsers = usersHeading.getBoundingClientRect().top; var innerHeight = window.innerHeight; if ((marginTopUsers - innerHeight) < 0) { this.loadMoreUsersFromAPI(); } } }
手机屏幕的空间有限。有时,开发人员会忘记这一点,并使用与桌面版本相同的界面类型。尤其是模态窗口,如果不正确的实现,对移动用户来说是个关卡。
模式窗口是你叠加在页面其他内容之上的窗口。对于桌面版用户,他们可以很好地工作。
由于屏幕空间有限,大型公司的移动网页应用(如Youtube或Instagram)设计得很好的移动网页应用都会把模态做为全宽或全屏,在模态的顶部有一个 ”X“ 来关闭。
注册功能尤其如此,在桌面版本中,注册功能是普通模式窗口,而在移动版本中,则是全屏模式。
到此,相信大家对“Web前端必知的优化技巧有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
现在虽然是移动互联网时代,但企业网站依然重要,包含PC站点,移动站。可以说企业网站关系企业的未来发展和前途,尤其对中小企业更是如此,一些中小企业老板,对自己的名片很在乎,因为这是个门面。...
用我们的专业和诚信赢得您的信赖,从PC到移动互联网均有您想要的服务!
如遇占线或暂未接听请拨:136xxx98888