手机版网站起码要实现一些基本的功能吧:

1.页面的适用性问题:

对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用12px或14px,那么,不一样的终端的效果差别会很大。所以这里,最好让网页的宽度自适应屏幕,还好,w3c在设计html的时候为我们考虑了这一点,只需一句话,就可以搞定,就是加上

复制代码代码如下:

,对于字体的话,我们就用em或ex为单位就好 。

2.版本制作问题:

移动页面往往针对不同的手机设置不同的版本,一般有精简版,标准版,3G版,触屏版,智能手机版等等,这些除了在页面设计上有不同外,页面语言也会不同的。精简版采用wap 1.0 的wml脚本编写,这个通用性以前很强,很多国产手机都支持这个语言的,但这个语言是很精简的。标准版的一般可以采用wap 2.0技术,对应的脚本语言是xhtml mp(xhtml mobile profile),这个语言是xhtml的子集,这个并且支持大部分的css,基本上和电脑版的差不多,但一般不能用js,这是考虑到这些手机是不支持js的。对于智能手机版,由于现在的智能手机都支持js,这个版本的制作上就简单多了,不过,又由于大部分智能手机(基本上除去塞班手机,包括Android,ios,wp7等)都支持Html5,因此,智能手版可以采用html5来制作。

3.版本控制问题:

可能这部分是比较不好解决的,怎么智能判断手机的最佳版本并跳转,可以从这几个方面考虑。一方面,可以想办法得到手机的操作系统,比如,Android的,ios的,就可以跳转到html5版了,windows系统,毫无疑问电脑版,获得手机系统,可能通过得到手机型号,现在的方法是通过浏览器的UA(user agent),获得手机的一些信息,简单一点的,直接可以通过UA判断手机的制造产商。要想获得更多的信息,就得有一个数据库,因为不同手机型号会有不一样的UA信息,世界上的手机有很多,自己要想做一个这样的数据库还是很难的,不过,已经有人为我们做好了这样的数据库,或者更方便的,做好了一个识别手机适用最佳版本的函数库,这里我推荐用Wurfl。另一方面,可以通过页面的脚本来判断浏览器对js和html5的支持,代码如下

复制代码代码如下:

版本控制

window.onload = function(){

//检测是否支持js

try{//检测是否支持html5

document.getElementById("c").getContext("2d");

document.location = '支持html5版的链接';

}catch(e){//否则跳到支持js版

document.location = '支持js版';

}

};

普通版

如果你仅仅想开发一个版本,只是判断一下是不是移动客户端,这里引用一段discuz! x2的代码

复制代码代码如下:

function checkmobile() {

global $_G;

$mobile = array();

static $mobilebrowser_list =array('iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini',

'ucweb', 'windows ce', 'symbian', 'series', 'webos', 'sony', 'blackberry', 'dopod', 'nokia', 'samsung',

'palmsource', 'xda', 'pieplus', 'meizu', 'midp', 'cldc', 'motorola', 'foma', 'docomo', 'up.browser',

'up.link', 'blazer', 'helio', 'hosin', 'huawei', 'novarra', 'coolpad', 'webos', 'techfaith', 'palmsource',

'alcatel', 'amoi', 'ktouch', 'nexian', 'ericsson', 'philips', 'sagem', 'wellcom', 'bunjalloo', 'maui', 'smartphone',

'iemobile', 'spice', 'bird', 'zte-', 'longcos', 'pantech', 'gionee', 'portalmmm', 'jig browser', 'hiptop',

'benq', 'haier', '^lct', '320x320', '240x320', '176x220');

$useragent = strtolower($_SERVER['HTTP_USER_AGENT']);

if(($v = dstrpos($useragent, $mobilebrowser_list, true))) {

$_G['mobile'] = $v;

return true;

}

$brower = array('mozilla', 'chrome', 'safari', 'opera', 'm3gate', 'winwap', 'openwave', 'myop');

if(dstrpos($useragent, $brower)) return false;

$_G['mobile'] = 'unknown';

if($_GET['mobile'] === 'yes') {

return true;

} else {

return false;

}

}

function dstrpos($string, &$arr, $returnvalue = false) {

if(emptyempty($string)) return false;

foreach((array)$arr as $v) {

if(strpos($string, $v) !== false) {

$return = $returnvalue ? $v : true;

return $return;

}

}

return false;

}

var_dump(checkmobile());//如果是移动端返回true,否则false

?>

4.手机版本的大小问题:

一般来说,对于精简版和普通版的手机网页,我们是做得越精简越好,能省的代码最好省去,毕竟现在手机流量对用户来说还是很宝贵的。比如元素命名,一般页面少的话,命名越短越好,css最好写在一行。css中,有些元素是继承父类的样式的,不用重复定义,善用默认值。

5.浏览器缓存:

如果再更新不快的情况下,最好开启浏览器缓存。

php 如何用op浏览器开发手机网站,关于开发手机网站的一些总结相关推荐

  1. php 如何用op浏览器开发手机网站,PHP实现手机网站支付(兼容微信浏览器)

    网上的很多PHP支付宝支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通过整理后给出一个单文件版的,希望可以给各位想接入支付宝支付的带来些许帮助和借鉴意义. 推荐:<PHP视频教程> ...

  2. 织梦dedecms小程序社交电商系统开发网络公司网站模板(带手机移动端)

    织梦内核开发的模板,该模板属于小程序.社交电商.网络公司类企业使用, 自带手机移动端,同一个后台,数据即时同步,简单适用! 注:首页右上角的商家中心和演示中心是跳转别的页面,本模板不包含,登录注册的会 ...

  3. WAP2.0手机网站的开发

    前一阵帮着学校开发了WAP2.0的手机版学校首页.http://wap.chd.edu.cn 从零基础入门,总体来说上手还是挺容易的,现在就来写一写关于我在wap2.0开发中遇到的问题,一来记录一下自 ...

  4. PC上测试移动端网站和模拟手机浏览器

    1. PC上测试移动端网站和模拟手机浏览器 1) PC上测试移动端网站和模拟手机浏览器的5种方法 http://www.jb51.net/softjc/144941.html 2)  结论 使用场景: ...

  5. 用Chrome浏览器模拟手机,android,iphone,ipad访问网站

    很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容.谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器.在Windows的[ ...

  6. 用Chrome浏览器模拟手机,andriord,iphone,ipad访问网站

    很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容. 谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器.在Windows的 ...

  7. 怎么制作手机网站?如何建一个wap手机网站?所谓手机网站指手机能访问的网站,现在手机浏览器对html...

    所谓手机网站指手机能访问的网站,现在手机浏览器对html5支持了,打开电脑站是没问题的,但体验就不咋的了.随着网站建设的发展,对于网站建设形式上有了很大的变化和创新,从根据不同行业如企业.集团.门户. ...

  8. 支付宝手机网站支付开发记录之结果异步通知

    开发的时候明明配置了异步通知,可是没有执行异步通知,就算是官方Demo也不行 https://openclub.alipay.com/read.php?tid=1314&fid=46& ...

  9. HTML5响应式手机模板:电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板...

    HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 ht ...

最新文章

  1. 2014.12.01 B/S之windows8.1下安装IIS
  2. JAVA 多线程实现包子铺(买包子,吃包子)
  3. android x86怎么引导,Android、Ubuntu、win三系统引导求教
  4. html5开发桌面界面设计,HTML5触摸界面设计与开发
  5. DL之DNN优化技术:神经网络算法简介之数据训练优化【mini-batch技术+etc】
  6. 简单扩展shiro 实现NOT、AND、OR权限验证(支持复杂一点的表达式)
  7. C++11中range-based for loops中与的区别
  8. 安卓mysql插入数据_Android批量插入数据到SQLite数据库的方法
  9. linux 监控进程调度,linux进程启动调度监控和管理
  10. (转)程序员如何快速准备面试中的算法
  11. 解决办法:nvidia-docker2 : 依赖: docker-ce (= 5:18.09.0~3-0~ubuntu-xenial)
  12. a星算法的优缺点_轻松理解机器学习算法:C4.5算法
  13. Autodesk AutoCAD 2018 for mac
  14. easypoi 语法_【语法微课合集】50堂英语语法微课,视频课件免费下载,建议收藏或转发朋友圈...
  15. 计算机硬件cpu指令执行过程,cpu执行指令的过程详解
  16. HDU 6070 Dirt Ratio
  17. 小白如何从零开始运营微信公众号?
  18. Redis Master/Salve Replication(主从复制模式)
  19. alpine 使用国内源
  20. linux设备驱动之pci设备的I/O和内存

热门文章

  1. 详解TCP协议与UDP协议的区别
  2. MacBook Pro如何安装Python编译器
  3. 直播答题:撒钱狂欢能嗨多久
  4. 凡人无法打开的文件4
  5. python求矩阵的最大特征值及对应的特征向量
  6. 国家政策!大有广阔天地的商城结算平台
  7. Aptina HiSPi与并行传感器的桥接
  8. 根据经纬度计算地球两个坐标之间的方位角
  9. 计算机房建设的基本要求,《中心机房建设标准要求》.docx
  10. Linux后台开发系列之「05.解析 Linux 命令机制」