- <meta name="viewport" content="width=device-width"/>
,对于字体的话，我们就用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的支持，代码如下- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width"/>
- <title>版本控制</title>
- <script type="text/javascript">
- window.onload = function(){
- //检测是否支持js
- try{ //检测是否支持html5
- document.getElementById("c").getContext("2d");
- document.location = '支持html5版的链接';
- }catch(e){ //否则跳到支持js版
- document.location = '支持js版';
- }
- };
- </script>
- </head>
- <body>
- <canvas id='c'></canvas>
- 普通版
- </body>
- </html>
- <?php
- 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