悅?cè)唤ㄕ痉窒恚喊裀C網(wǎng)站改造成自適應(yīng)網(wǎng)站

有很多企業(yè)網(wǎng)站建設(shè)都是幾年前或十多年前做好的，當(dāng)時(shí)的網(wǎng)站建設(shè)主要還是針對PC網(wǎng)站，所以網(wǎng)站都只能在PC端正常顯示，在其它手機(jī)或平板上最多只能比例綜小，很多可能連字都看不清楚，這樣的網(wǎng)站用戶體驗(yàn)是非常差的。

如上圖所示，當(dāng)使用手機(jī)等移動設(shè)備打開PC網(wǎng)站時(shí)，網(wǎng)站內(nèi)容會縮小，一些字和圖片都看不太清楚了。

接下來悅?cè)痪W(wǎng)絡(luò)工作室給大家分享一個(gè)簡單的PC網(wǎng)站改造成自適應(yīng)網(wǎng)站的方法，可以讓你的PC網(wǎng)站免費(fèi)適應(yīng)適應(yīng)端。

第一步：修改網(wǎng)站頭部

把下面的代碼添加到網(wǎng)站頭部代碼的</head>標(biāo)簽上面

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

第二步：添加移動端CSS樣式

在網(wǎng)站根目錄添加一個(gè)wpa.css樣式，代碼內(nèi)容如下：

.logo_img img {width: 86%; height: auto;}
.mb_bar {display: block;border: none;width: 40px;height: 40px;text-indent: -900em;overflow: hidden;position: absolute;top: 50px;right: 2%;cursor: pointer;outline: none;background: #525356 url(static/images/menu-button-bg.png) no-repeat center center;background-size: 50%;z-index: 99;border-radius: 5px;}
.nav ul li{width:25%;text-align:center;}
.nav ul li a{padding:0;}

.nav{display:none;position: absolute;z-index: 2;background: #fff;border-top: 1px solid #ddd;}
.index_focus{width:100%;height:200px; left:0;margin-left: 0;}
.index_focus img{width:100%;height:200px;}
.nav {margin-left: 0;margin-top: 10px;}

第三步：引入移動端CSS樣式文件wap.css，將以下的代碼放在</head>上面；

把下面的代碼添加到</head>標(biāo)簽上面

<link href='<?php echo get_template_directory_uri(); ?>/wap.css' type='text/css' rel='stylesheet' media='screen and (max-width:768px)'>

第四步：修改移動端導(dǎo)航按扭

把下面的代碼放到PC網(wǎng)站導(dǎo)航代碼下面

<div class="mb_bar"></div>

<script>
$(".mb_bar").click(function() {
$(".nav").toggle(200);
});
</script>

總結(jié)

通過以上四個(gè)步驟就可以把你的PC網(wǎng)站改版成一個(gè)簡易的移動自適應(yīng)網(wǎng)站。但是這個(gè)方法效果可能不是很好，也有可能會愛到不同的網(wǎng)站程序和模板的限制，所以在使用應(yīng)用過程時(shí)你可能還得繼續(xù)修改代碼。

總體來說這個(gè)方法比較適合用來應(yīng)急，或者是用到一些不太重要的老網(wǎng)站上面。如果你想讓你的網(wǎng)站有更好的效果，那么悅?cè)痪W(wǎng)絡(luò)工作室還是建議你重新做好企業(yè)網(wǎng)站建設(shè)，制作一個(gè)真正的H5響應(yīng)式網(wǎng)站，這樣的網(wǎng)站才能擁有更好的移動端瀏覽體驗(yàn)，可以選擇wordpress建站、H5模板建站，或者是其它建站方式。