User-Agent切换小插件-咨道一课3.4


加载问题,请按此处!

视频字幕

hi,大家好!欢迎大家收看收听本期的咨道一课。今天爆老师和大家分享的话题是一个小工具叫做User-Agent小插件。

那这些小工具其实对于我们在做一些移动网站的时候非常有帮助的。因为我们知道现在做一个站点也要考虑PC端的展示包括mobile端的。响应式的设计是目前这个状态下面平衡 PC和mobile端的一种方式,但是很多我们在做网页的时候一定要去查看mobile端的页面的兼容性也好前端的layout的一些的问题的时候,不可能总是用你的手机去上随后去看手机里面的展示怎么样子。

再返回到你的电脑上去修改页面。那这样的话你的效率就会非常的低,因此,我们可以在我们的chrome或者我们的firefox上装一个小的widget。就是右上角的User-Agent小插件。那在这个小插件装上之后,当你在一个页面上面,假使你想看这个页面的移动版本的网页,你是可以去切换它的Agent。

Agent主要指的就是说网页它会去解决这个请求的时候,它会去看对方的这个终端来的Agent是什么。如果你把你的Agent切换到,比如说IOS里面的iphone。那对于爆老师我们的咨道学堂来讲的话,就会去显示一个我们移动版本的一个页面,给到我们的阅读者。
比如说这个页面,在这个页面里面,我们很重要的一点就是要知道响应式设计它是定高不定宽的,对不对?这个概念就是说,当我们的游览器的页面的宽度在发生变化的时候,它会自动调整而不会在下端出现一个横向的这样一个横条。比如说我们手机的屏幕就是这样的大小,如果下面出现横端的话,对于浏览体验是很差的。

随后一点就是说,当我们在做一些页面的时候,你可以发现会有一些图片,对不对?比如说这个图片,但是如果手机屏幕本身大小不一样的话,因为我们没有设置它的定宽,所以它的图片大小会跟着我们屏幕的大小自动去变。所以说,你在写你的页面的内容的时候,图片插入里面你要放一段很重要的代码,就是wide=100%这个就是不定宽。但是,会碰到一个问题,就是说如果你真的设置到100%。比如说我现在这个image那么大,随后它这里的图片它会撑到底就是从这儿撑到这一块,那这样的话,我的图片的像素肯定是不好的,所以我们要在这里面再多加一条style=max-width:649px; 最大的pixel是多少。就是说这个图片其实它原始的size宽度就是649,所以说这里定了一个在100%下面这个wide下面,它的最大width是多少?是649。

所以在这里面总的的来讲最大就刚才我拉拉拉拉拉拉到后面最大,它就到这里停止了。但是它缩小的话是可以根据页面浏览器终端的这个页面大小去缩小缩放的。因此,这个我们在做一些博客更新,特别是多媒体内容插入的时候都是可以这样子做的。包括看一个视频吧,视频其实也需要我们这样去做。

比如说回到一秀里面,比如说最近的一个视频叫做自媒体的误解,这个视频里面,它也是会根据我的不定宽去做,拉大的时候它会变成最大,当我变小的时候,它这里的也不会出去,也会我的这个宽度调整。所以说这样的一个东西,如果我们可以去使用的话是很方便去平衡PC和mobile端的这样的一个页面的。比如说我现在再切回到我们之前PC版本,当然我的设定是一个pc agent,随后它又出来的就是我们pc端的。

因此,在这些小插件里面包括你还可以去增加。比如说,以后三星又出了新的款式的手机或者是tablets也好,你可以去增加新的New Agent,非常方便。包括这里你可以去组哪一些New Agent是属于怎么样怎么样的你可以自己去定义,非常的方便,对于设计师来讲或者对于我们一些分析网站的一些小伙伴们来讲都是非常有帮助的。好了,这些就是爆老师今天与大家分享的话题,希望大家能喜欢,下期再见,拜拜~

User-Agent切换小插件-咨道一课3.4
返回到优化技能课程 | | 作者:爆老师 Boson 发表于 06/02/2014

『欢迎大家在下方参与(User-Agent切换小插件-咨道一课3.4)评论和分享』


在线咨询