wordpress CMS主题 微信
Home > IT资源, 网站建设 > 响应式主题怎样禁止网页缩小,但可以放大

响应式主题怎样禁止网页缩小,但可以放大

高时银博客 IT资源,网站建设 点击: 3,528 次 0 0
  • 标签:
  • 最近费了一点功夫把高时银博客做成了一个兼容手机等移动设备的网站,即响应式网站。这是由于在群里跟一些群友聊天时,群友问我为什么不把自己的网站也建一个手机网站呢?并说现在很多用户都通过手机来查找需求信息,这是一个非常大的用户群体哦。一时心血来潮,就把高时银博客以及时美网做成了兼容手机的响应式网站,即在不同的终端都能正常显示。

    本节,主要细说在制作响应式主题时所要注意的一个非常关键的细节问题——响应式主题怎样禁止网页缩小,但可以放大。

    我在设置手机模式时,用手机浏览器浏览我的网页时,发现我的网页可以缩小到看不清字是什么字,而我观看别的手机网站时(如爱美网),发现它们都不能缩小,只能放大。发现这个问题后,我马上开始查找相关资料,最终发现问题出在添加到头文件的那部分代码上。

    我原来的代码是:

    <meta name="viewport" content="width=device-width" /> <!-- 手机浏览时用 -->

    这个代码只是让网页的宽适应手机的物理镜面宽度。却没有设置它的最小宽度,以及页面缩放的比率,这样就造成了上面我所说的情况的发生。

    经研究,只要把这句代码改成下面这句就行了:

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=4, minimum-scale=1, user-scalable=yes" /> <!-- 手机浏览时用 -->

    解释一下这句代码的意思吧:

    width=device-width:表示网页的宽度等于屏幕的宽度;

    initial-scale=1:表示网页显示的最小面积是一个屏幕比率,即跟屏幕一样宽;

    maximum-scale=4:表示网页可以放大到屏幕宽度的4倍;

    minimum-scale=1:表示网页能缩小到屏幕的1倍,也就是不能缩小网页,即原始大小。

    user-scalable=yes:表示网页可以用户动手调整大小,如果把yes改成no,就表示不能动手调整大小。

    这一步非常关键,如果缺少这一步,所有的功夫都会白费。所以,想要把自已的主题改成响应式主题的朋友,一定要注意了,否则,出错了,半天也摸不着头脑的哦。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201402221266.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论