其实主要就是改掉HTML页面声明：

在网页中加入以下代码，就可以正常显示了：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>

解释：

device-width 是viewport的宽度

device-height 是viewport的高度
initial-scale 初始的缩放比例
minimum-scale 允许用户缩放到的最小比例
maximum-scale 允许用户缩放到的最大比例
user-scalable 用户是否可以手动缩放

精简点的话，可以把上面的代码更改为以下代码，效果是一样的：

<meta content="width=device-width,user-scalable=no" name="viewport">

最后就是不要设置太大的具体宽度属性了，比如你在网页把Body的宽度属性设为1000px，这肯定是不行的了，但是可以设置为90%，这是屏幕自适应的。

<!doctype html>

<html>

    <head>

        <title>手机浏览器页面</title>

        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <meta name="format-detection" content="telephone=no">

    </head>

    <body>

        <div>

            此页面适应手机端浏览器

        </div>

    </body>

</html>

html兼容手机浏览器的更多相关文章

  1. css3在不同型号手机浏览器上的兼容一览表

    网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看.  以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持   ...

  2. 手机浏览器通过Scheme跳转APP，兼容各种手机浏览器

    一个比较完整的产品线,必定有APP和网站,另外还有微信公众号网页和小程序.那么有一个比较常见的需求就是在手机浏览器内打开APP,实现起来也比较简单,只要APP配置的有URLScheme即可. 但是因为 ...

  3. 华为手机浏览器不支持PUT提交方式的解决方案

    最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为 ...

  4. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  5. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  6. Bootstrap 3兼容IE8浏览器（转）

    Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...

  7. Bootstrap 3 兼容 IE8 浏览器

    公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...

  8. js判断是否为手机浏览器

    JS判断手机浏览器 判断原理: JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根 ...

  9. UC手机浏览器js加入收藏夹

    概述 对于某些网站来说,让用户一键把网页加入收藏夹的设计是非常棒的,它能提醒用户把网页加入收藏夹,从而增加用户的回访率,使网站获得更多的流量. 在PC端,只有ie和ff支持用js把网页加入收藏夹的操作 ...

随机推荐

  1. centos7开启端口（永久--permanent）

    1.运行命令:firewall-cmd --get-active-zones运行完成之后,可以看到zone名称,如下: 2.执行如下命令命令: firewall-cmd --zone=public - ...

  2. Java注解的基本概念和原理及其简单实用

      一.注解的基本概念和原理及其简单实用 注解(Annotation)提供了一种安全的类似注释的机制,为我们在代码中添加信息提供了一种形式化得方法,使我们可以在稍后某个时刻方便的使用这些数据(通过解析 ...

  3. 2012 - AD GC全局编录服务器(Global Catalog)

    普通域控制器只记录本域对象的信息,而GC全局编录服务器则不仅记录本域所有对象的只读信息,还记录林中所有其他域中部分域对象的只读信息.   GC全局编录服务器作用: 1,存储对象信息副本,提高搜索性能: ...

  4. Jupyter配置步骤

    Jupyter是基于浏览器的可交互式开发工具,在数据科学界非常受欢迎,它功能齐全,使用方便,是一款数据分析和建模挖掘的利器. 本文简介Jupyter的配置和使用过程 一.修改添加国内镜像 通常我会先安 ...

  5. Jquery ajax回调函数不执行

    ajax如下: $.post( "${pageContext.request.contextPath}/deptHead_assign.action", {"studen ...

  6. jms和activemq简介

    一.JMS简介 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消 ...

  7. escape()、encodeURI()、encodeURIComponent() 编码解码

    escape().encodeURI().encodeURIComponent()区别详解 JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encode ...

  8. SerializeHelper

    using System; using System.Collections.Generic; using System.Configuration; using System.IO; using S ...

  9. centos6.2 安装Mysql5.6

    1. mysql官网下载rpm包 [root@slave2 home]# ls hbase  hive  mysql  mysql57-community-release-el6-11.noarch. ...

  10. mysql自动创建分区

    call Insert_Partition('2018-07-07','2019-01-01'); 存储过程 BEGIN DECLARE nowdate date; DECLARE endtmp da ...