会员服务
default sy_dh
在线客服
从零写移动着陆页二:让移动着陆页适应多种手机 - 实操手册 - 富裕者联盟社区 - Affiliate营销圈

60回答

0收藏

从零写移动着陆页二:让移动着陆页适应多种手机

 

实操手册 实操手册 10730 人阅读 | 60 人回复 | 2023-02-07

欢迎继续这个移动着陆页制作系列文章。第一篇看这里:

我们最终得到的是一个可以在大多数手机上运行良好的着陆页,但它不是完美的。而且,特别是当你确定了哪些手机可以为你转换时,你想要——你需要——完美。

这就是本教程将向你展示的内容——如何构建一个强大的自适应着陆页 ,将适应任何手机查看它,并准确的按照你的需要显示。

本教程所需要的:

你不需要太多的技能来完成这个教程,但是有一些重要的要求:

—你需要注册BrowserStack,移动测试工具。BrowserStack的付费订阅对于移动开发来说确实不是可选的——它是唯一能完成这项工作的工具,除非你想购买40或50部手机进行测试。对于本教程,如果你非常小心,并且在不使用它的时候退出,那么你可能可以获得30分钟的免费试用。

—一款能够浏览网页的手机——在这部分不那么重要,但仍然很方便。

—图像编辑工具。

—一个可以存放着陆页以供访问的网络空间。我在我的服务器上创建了一个新的文件夹“MobTest”。

—一份你想使用的手机清单。试着让你的登陆页在每台手机上都正常工作。如果你看过 Stackman 的移动广告指南,你将已经确定哪些手机能够转化你的任务——针对它们优化。否则,如果你是为了学习而跟随本文,只需要选择一些流行的手机——iPhone 4、华为手机、三星手机或类似的手机。

目录

本教程要讲的内容很多,所以这是目录,方便浏览:

  • 这一切如何起作用:媒体请求的神奇特性

  • 让页面对横屏友好

  • 调整字体大小

  • 只加载你需要的图片

  • 更多可以做的

一、这一切如何起作用:媒体请求的神奇特性

我们如何让一个单一的设计能够适应所有的手机呢?

我们并不打算这么做。

实际上,我们会采用一些 CSS 的神奇特性使得我们的着陆页自适应任何浏览它们的手机。

相比于传统互联网,在移动端工作的一个乐趣在于,浏览器技术相对更加现代。这意味着很多最新版本的CSS功能都得到手机的完美支持,而电脑端则不是如此。

一个CSS特别神奇的特性就是媒体请求(media query),这就是我们今天要使用的。它让我们可以根据浏览页面的浏览器不同而改变我们的样式表。

有点难懂?不要担心,下面是一个快速说明。

把下列HTML代码粘贴到一个新的文件,然后上传到服务器的一个位置:

然后设置你的手机自动转向。

然后浏览这个页面,当你转动成为横屏的时候,你会发现字体颜色变化了。

我们用同样的检测方法使得着陆页适应任何手机。而且我怀疑大多数经验丰富的联盟客在阅读这篇文章时,也会想到这一技术的其他各种邪恶用途……

(“你现在就可以解锁这个一次性优惠——只要转动你的手机!”)

二、让页面对横屏友好

所以,让我们在我们之前使用的同一部手机上开始让我们的页面工作——但这次是在横向方向。

这其实非常简单。我们要做的就是添加第一个媒体请求。就在关闭#/style#标签之前,添加:

差不多就是这样。上传然后测试,并调整图片大小到你认为合适。你可以看到和竖屏模式下完全一样的着陆页,只不过横屏下的样式变成了这样:

提示:如果你的图片破坏了着陆页底部的显示,可以在页面最后的#/div#之前添加#br clear="all"

加入社区,可阅读全站10w+资源

 非会员试读19%,加入社区后可阅读全文 

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
分享到:
回复

使用道具 举报

回答|共 60 个

sakai

发表于 2023-2-7 22:44:20 来自手机 | 显示全部楼层

此帖仅作者可见

使用道具 举报

TonnyLee

发表于 2023-2-8 08:26:29 | 显示全部楼层

此帖仅作者可见

使用道具 举报

jsljh315

发表于 2023-2-8 09:47:05 | 显示全部楼层

此帖仅作者可见

使用道具 举报

午后时光

发表于 2023-2-8 12:36:34 来自手机 | 显示全部楼层

此帖仅作者可见

使用道具 举报

jht_2003

发表于 2023-2-8 14:12:39 | 显示全部楼层

此帖仅作者可见

使用道具 举报

afbqc

发表于 2023-2-8 14:20:02 来自手机 | 显示全部楼层

此帖仅作者可见

使用道具 举报

cloole

发表于 2023-2-8 15:41:23 | 显示全部楼层

此帖仅作者可见

使用道具 举报

slipknot

发表于 2023-2-8 18:26:52 | 显示全部楼层

此帖仅作者可见

使用道具 举报

galaxy_jiang

发表于 2023-2-9 11:16:09 | 显示全部楼层

此帖仅作者可见

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭