目錄
Toggle有很多企業(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)站頭部代碼的</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">
在網(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;}
把下面的代碼添加到</head>標(biāo)簽上面
<link href='<?php echo get_template_directory_uri(); ?>/wap.css' type='text/css' rel='stylesheet' media='screen and (max-width:768px)'>
把下面的代碼放到PC網(wǎng)站導(dǎo)航代碼下面
<div class="mb_bar"></div>
<script>
$(".mb_bar").click(function() {
$(".nav").toggle(200);
});
</script>
通過以上四個(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模板建站,或者是其它建站方式。
? Copyright 2024. 悅?cè)痪W(wǎng)絡(luò)工作室/悅?cè)粀ordpress建站 專注中小企業(yè)wordpress建站 All Rights Reserved.網(wǎng)站地圖
本站圖片來源為Pexels、Pixabay、Freepik、Unsplash等圖片庫的免費(fèi)許可,CC0協(xié)議;還有部分為自己手繪,版權(quán)碰瓷請自重!法律服務(wù):law@yueranseo.com 蜀ICP備20016391號-1 川公網(wǎng)安備 51011502000367號
?
?
?
?
微信聯(lián)系