239 views

内容营销不单单是内容的创造,还包括所创造内容的展示效果。不知道你是否和我有相同的经历:用手机浏览某一网站,文字和图片非常小,显示的图文比例是按照PC端展示的,你不得不放大页面才能看清其中的文字,然而这样的浏览体验太烦人了!这样即便你准备的内容含金量非常高,依旧达不到内容营销想要的效果。

什么是用户视图?

网站的用户视图控制着用户所看到的移动设备所展示的页面宽度。如果网站视图不符合动设备,对于浏览者来说太糟糕了。用户通过移动设备浏览页面已成为大的趋势。所以为了用户更好的体验,请开始做出移动自适应的设计吧。

通过本章内容,将会为你介绍如何实现移动自适应。

对比网页有自适应和没有自适应两种效果

当你没有设置自适应时,你的移动设备页面展示和PC端页面比例一样,因此在移动设备上展示的图片和文字会非常小,而PC端的页面像素变化区间是800-1024。222

当你设置了自适应时,用户所浏览的页面宽度将自适应设备屏幕尺寸,从而让用户更好的浏览。对比的效果如何呢?右侧设置过自适应的页面看起来浏览体验更好。

 

那么接下来,你该怎么做呢?首先,检查你的页面是否已经做了移动自适应设置。如果通过移动设备打开的效果没有体现,请你继续阅读。

如何设置移动自适应?只需要把下面的自适应标签放在页面上,所做的工作就是把HTML粘贴到网站标题。

<meta name=viewport content=”width=device-width, initial-scale=1″>

在很多情况下,你需要粘贴HTML到任何一个页面,为了保证你的着陆页和博客自适应,响应的检查代码吧。需要注意的是,粘贴了此代码不能全部保证所有移动设备自适应,但是要比原效果好很多,用户无需手动放大页面以查看文字和图片了。

关于设备宽度(device width)

如果宽度设定为device width,意味着你不需要去一一设定所有设备的宽度,你的页面将会根据设备宽度自动调整到最佳观看效果。这也是我们追求的目标。

一旦出于某些原因,你的内容在特定设备呈现时需要特定的宽度,切记其他设备的展示效果都会改变,所以我们并不推荐这么做。比如你设定的宽度想更好的自适应iphone6,iphone6的屏幕宽度是667像素,那么你的代码就是:<meta name=viewport content=”width=667, initial-scale=1″>;所有ipad的宽度是1024像素,那么你的代码就是:<meta name=viewport content=”width=1024, initial-scale=1″> 。

还有一个问题是当用户旋转移动设备时,屏幕也会旋转,这时候该怎么办?这时候你可能会想到用JS去标记,不过最简单有效的方式是固定设备的宽度。这么做的目的是保证用户在移动设备打开邮件时时1:1的展示效果,无论屏幕怎么旋转。

总之,除了优质内容的创造外,一定要做好页面展示,照顾目标受众的感受,这样才是好的内容营销。

相关文章

评论