手机和电脑网站显示不同画面

站长大多有手机和电脑网站显示不同画面的需求，下面介绍几种方法供大家参考。

一、CSS法

控制手机端显示不同画面

1
2
3
4
5
@media all and (min-width: 481px) and (max-width: 768px) {
  #xxx,.xxx {
  /*style*/
  }
}

二、PHP法

如果是WordPress网站，很简单

1
2
3
4
5
<?php if ( wp_is_mobile() ){ ?>
  //mobile code
<?php }else { ?>
  //pc code
<?php } ?>

如果不是WordPress网站，则在头部定义函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function wp_is_mobile() {
	if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
		$is_mobile = false;
	} elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // Many mobile devices (all iPhone, iPad, etc.)
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}
	return $is_mobile;
}