wordpress CMS主题 微信
Home > 网站建设 > 怎樣禁止響應式主題網頁縮小,但可以放大

怎樣禁止響應式主題網頁縮小,但可以放大

高时银博客 网站建设 点击: 2,915 次 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/77201404041818.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

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

    发表评论