如何仅对移动用户隐藏/显示文本?

时间:2018-05-28 作者:Tenz

我的页面上有文本内容,这会导致移动设备上的滚动次数过多。我希望避免移动/桌面使用单独的页面。理想情况下,编辑器会在某些段落周围添加一个短代码,以便在较小的屏幕上隐藏/显示其他内容。

因此,下面的所有文本都将显示在桌面上,但第二段将替换为移动设备上的隐藏/显示链接:

Lorem ipsum dolor sit amet,sit at voluptatum completitor。Ei每直径情况下为负。大海在最小的虚幻中,我是一个开窍的人,我是一个初生的人。

[隐藏手机]与ullamcorper eu提名。在mea PRODUSSET temporibus APPLANTUR中,动物质量优先,指示clita vel编号。[/HiddenInitiallyforMobile]

我很惊讶,我还没有找到插件解决方案或明显的方法来做到这一点。也许我想得不对。

1 个回复
SO网友:Afnan abbasi

我想您可以为段落设置类,并将其仅在移动视图上显示为“无”。

例如

@media screen and (max-width:479px){

.nameofclasswhichtheparagraphhas {display:none;}

}
并在其下方添加一个按钮,但为笔记本电脑用户将其显示设置为“无”。例如

@media screen and (max-width:768px){
.theclassofthebuton {display:none;}
}
然后对按钮使用javascript,例如,

document.getElementById("buttonsID").onclick.style.display = "block";
这样,按钮将仅在移动版本上显示,并在单击时显示内容。这也是我正在尝试的,尽管我只是想帮忙。根据网站的不同,我不知道这是否可以正确实施。但还是让我知道这是否有用。

结束

相关推荐

Menu Responsive

如何使菜单栏响应?当我将窗口裁剪为手机大小时,菜单不会随标题一起更改,在标题图像和菜单栏之间留下空白,或者重复显示两次菜单。