网页宽度自动适应手机屏幕宽度的方法
2016-06-29 12:43
465 查看
问题描述
今天通过手机预览了一下目前正在做的网站,发现完全不是自己期望的效果,如下但是PC端预览是Ok的。
解决方案
方案一
为手机端开发一个站点。判断当前是不是手机访问,然后跳转到相应的网站。function IsMobile() { //如果有HTTP_X_WAP_PROFILE则一定是移动设备 if(isset($_SERVER['HTTP_X_WAP_PROFILE'])) return TRUE; //如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息 if(isset($_SERVER['HTTP_VIA'])) { //找不到为flase,否则为true return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false; } //判断手机发送的客户端标志,兼容性有待提高 if(isset($_SERVER['HTTP_USER_AGENT'])) { $clientkeywords = array('nokia','sony','ericsson','mot','samsung','htc','sgh','lg','sharp','sie-','philips','panasonic','alcatel','lenovo','iphone','ipod','blackberry','meizu','android','netfront','symbian','ucweb','windowsce','palm','operamini','operamobi','openwave','nexusone','cldc','midp','wap','mobile'); //从HTTP_USER_AGENT中查找手机浏览器的关键字 if(preg_match('/('.implode('|', $clientkeywords).')/i', strtolower($_SERVER['HTTP_USER_AGENT']))) { return TRUE; } } //协议法,因为有可能不准确,放到最后判断 if(isset($_SERVER['HTTP_ACCEPT'])) { //如果只支持wml并且不支持html那一定是移动设备 //如果支持wml和html但是wml在html之前则是移动设备 if((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) { return TRUE; } } return FALSE; }
方案二
让其自适应,比如使用bootstrap等。最简单的方法是添加如下代码<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />可以让网页的宽度自动适应手机屏幕的宽度。
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
相关文章推荐
- 资源推荐 | TensorFlow电子书《FIRST CONTACT WITH TENSORFLOW》
- jquery在选择元素的时候,可以写成var div=$("div")
- Apache kafka 解读
- cocoapods 最新安装教程
- C#实现顺序表(线性表)完整实例
- 微信公众平台开发之处理图片.Net代码解析
- 利用iptables来配置linux禁止所有端口登陆和开放指定端口
- ListView的item点击问题
- 如何高效的学习TensorFlow代码?
- iOS下使用FFMPEG的一些总结
- Linux GCC 开发入门(一) -- 使用makefile 命令行编译
- 解决使用maven打包项目时,依赖jar先解压成class在打包的问题
- TensorFlow深度学习笔记 循环神经网络实践
- XML 特殊字符
- 经典算法题09-字符串模式匹配KMP
- HDU 5701:中位数计数
- JavaSE 基础 第12节 基本算术运算符与模运算符
- LeetCode 307 Range Sum Query - Mutable(范围和查询-可变)
- 史上最全设计模式导学目录(完整版)
- Python filter map reduce lambda Method detail