html宽度等于手机宽度,网页宽度自动适应手机屏幕宽度的方法

问题描述

今天通过手机预览了一下目前正在做的网站，发现完全不是自己期望的效果，如下

但是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等。最简单的方法是添加如下代码

可以让网页的宽度自动适应手机屏幕的宽度。

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

html宽度等于手机宽度,网页宽度自动适应手机屏幕宽度的方法相关推荐

html怎么设置页面自适应屏幕大小,网页设计设置页面自适应屏幕宽度
方法: 1.在网页头部加上这样一条meta标签: 解释: width=device-width :宽度等于设备屏幕的宽度 initial-scale=1.0:表示:初始的缩放比例 minimum-sc ...
将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单，可以利用meta标签声明。
web网页转化手机自适应网页三步走: 1.打开你需要制作手机网页的html或者php等等网页源码文件.在<head></head>之间加入meta标签. 2.向浏览器声明该网页 ...
python设置列宽度_如何在xlsxwri中自动设置列的宽度
我只知道用COM来做这个的方法.在import contextlib, os, win32com.client @contextlib.contextmanager def load_xl_file( ...
HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
原链接:https://www.cnblogs.com/libaoli/p/5779629.html 作者:请叫我阿力这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方, ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
如何让网页自适应所有屏幕宽度
随着网络的快熟发展,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通 ...
html body自适应屏幕大小,如何让网页自适应所有屏幕宽度
随着网络的快熟发展,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通 ...
html自动适配手机屏幕,手机web——自适应网页设计（html/css控制）
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. viewport是网页默认的宽度和高度, ...
使用CSS定义一个和屏幕宽度一样正方形容器
使用CSS定义一个和屏幕宽度一样正方形容器介绍一下如何使用CSS定义一个和屏幕宽度一样正方形容器. 问题有时候,我们在移动端需要做一个商品展示页面,一打开页面,屏幕的上面一半展示为商品的图 ...
网页自适应手机、电脑屏幕的设置方法
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

html宽度等于手机宽度,网页宽度自动适应手机屏幕宽度的方法

html宽度等于手机宽度,网页宽度自动适应手机屏幕宽度的方法相关推荐

最新文章

热门文章