怎么解决手机浏览器 自适应宽高后

解决手机浏览器自适应宽度和高度的方式是使用如下css即可：

content img{

max-width:100%;

height:auto;

}

但是网页中的img标签是这样的：

<img alt="湖北省第25届摄影艺术展" src="h/20140606063027270jpg" style="height: 337px; width: 600px;">

注意到img标签里面style属性定义了height高度，这样css就无法重写样式。

所以想到用PHP在页面输出的时候去掉img标签中height的CSS定义，代码如下：

$content = preg_replace('/([^>])(height: [0-9]+px;)([^<>])/i', '$1$3', $content);

这样替换之后img标签变成这样：

<img alt="湖北省第25届摄影艺术展" src="/20140606063027270jpg" style=" width: 600px;">

OK，可以在手机浏览器中自适应宽高度了。

为什么会这样呢？因为宽度很好说，是手机屏幕的宽度，可以定义max-width来解决，但是高度并不能自动按比例缩小，高度用max-height是手机屏幕的高度，所以img标签定义了高度就无法更改了。

除此之外还可以用jQuery或者原生js，重写img标签里的CSS应该也行。

后来有朋友这样说的

手机浏览器(移动站点)自适应的css代码:

img{max-width: 100%;height: auto;width: auto\9;}

用max-width设置如果尺寸大于当前浏览器尺寸就自动缩放, 的高度设置正比缩放, 但是ie8有个比较二的bug就是不支持max-width属性, 而ie7和ie9都支持

content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

网页浏览器（Web Browser），常被简称为浏览器，是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、、影音或其他内容，它们由统一资源标志符标志，信息资源中的超链接可使用户方便地浏览相关信息。>

有两种

1通过设置viewport参数

2使用css3中的缩放

两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例，然后进行缩放。但是因为目前手机种类繁多，浏览器种类也很多，所以每种方法各自都有不少的问题。

<</span>meta name=“viewport” content=“width=device-width, initial-scale=10, minimum-scale=05, maximum-scale=20, user-scalable=yes” />

在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

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

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

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

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

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

以上就是关于怎么解决手机浏览器 自适应宽高后全部的内容，包括:怎么解决手机浏览器 自适应宽高后、手机浏览器 工具栏 影响高度、html5里面怎样自动适应手机屏幕的高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！