
求采纳
手机端与pc端最大的区别就在于屏幕的尺寸上,由于手机端屏幕较小,所以要尽可能的利用。一般来说,现在开发手机站,常常会用到“响应式布局”或者“流式布局”,这两种布局模式可以根据屏幕的大小自动调整元素本身的大小或者通过隐藏一部分元素来达到在手机上较好的展现效果。采用响应式布局,需要注意以下几点:第一,用百分比给元素设定大小;第二,不要对元素进行绝对定位;第三,写css时用上@media媒体查询技巧;第四,head标签加上<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">。bootstrap确实是响应式布局做得不错的前端开发工具。
dedecms建站移动化问题,从6.18织梦更新手机站后问题就解决了,下面是对网站系统做的一些升级记录(记得升级之前一定要备份,切记)以网站http://boaer.com为例:
第一步:下载官方升级文件v57sp1-20150618.zip (记得升级之前一定要备份,切记)
第二步:解压覆盖原来的文件。上传到服务覆盖之前的文件。
第三步:对模板文件的修改。复制以前的老模板文件,分别加上一下代码:
首页:
<meta http-equiv="mobile-agent" content="format=xhtmlurl={dede:global.cfg_mobileurl/}/index.html">
<script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/index.html"}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>
栏目页
<meta http-equiv="mobile-agent" content="format=xhtmlurl={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}">
<script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}"}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>
文章页面
<meta http-equiv="mobile-agent" content="format=xhtmlurl={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}">
<script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}"}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>
建议把其中的{dede:global.cfg_mobileurl/} 修改为手机站网站,例如修改成http://m.boaer.com/ 。这代码的主要含义是手机跳转到手机页面。
对手机端模板修改,主要是添加统计代码,对css的一些调整,手机模板也存在于默认模板下.主要的有:
header_m 顶部
index_m 首页
footer_m 底部
index_default_m 列表页
修改之后覆盖。解决验证码失效问题:
直接取消验证码
1、打开 login.php 找到:
if($validate==” || $validate != $svali)
替换为:if( false )
2、在模板文件dede/templets/login.htm里去掉以下验证码的具体HTML代码:
<li><span>验证码:</span>
<input name=”validate” type=”text” id=”vdcode” style=’width:50pxtext-transform:uppercase’ />
<img id=”vdimgck” src=”../include/vdimgck.php” alt=”看不清?点击更换” align=”absmiddle” style=”cursor:pointer” onclick=”this.src=this.src+’?'” />
</li>
第四步:把二级目录变为二级域名,就可以方位手机站了。网址:http://www.boaer.com/m/ 为了更友好,可以把二级目录变为二级域名。
1、解析二级域名到服务器IP。
2、解决图片不显示的问题。
把图片变成绝对地址
改目录include下的文件extend.func.php,在最后面添加一个函数方法
function replaceurl($newurl)
{
$newurl=str_replace('src="/uploads/allimg/','src="http://你的域名/uploads/allimg/',$newurl)
return $newurl
}
另外调用文章正文内容的标签{dede:field.body/}
需要改成: {dede:field.body function='replaceurl(@me)'/}
此方法可以适用于任何调用绝对路径图片的页面。
手机访问网站时就会自动跳转到手机站网址了。其他问题可以去DEDECMS官方论坛看看,或者百度搜索基本上都能找到答案。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)