其实主要就是改掉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. SCCM2012 R2实战系列之六：安装客户端代理软件

    在安装客户端代理软件之前,请大家确保已经对本系列的第四和第五部分有了基本了解,而且对SCCM环境做了初始化配置和发现方法.我们目前讨论的是加域的计算机,对于工作组的计算机还需要进行额外的配置.在上篇文 ...

  2. C++使用Mysql的详细步骤及各个常用方法的代码演示：select,insert,update,delete

    这几天一直在学习C++下使用Mysql的方法及其中各种的问题,也看了很多Mysql的API函数,当然自己看的还是很基础的.其实对于每种数据库的操作,基本的方法都是非常类似的,大多都是connect,s ...

  3. courator - maven

    ZK3.4.x: <!-- https://mvnrepository.com/artifact/org.apache.curator/curator-recipes --> <de ...

  4. mint-ui 输入框按下按键执行查询

    环境:vue.mint-ui 功能:一个输入框,按下按键之后就执行某个功能. 截图:一个输入框 输入框html: <mt-search v-model="query" can ...

  5. OpenStack Nova虚拟机创建流程解析

    https://yikun.github.io/2017/09/27/OpenStack-Nova%E8%99%9A%E6%8B%9F%E6%9C%BA%E5%88%9B%E5%BB%BA%E6%B5 ...

  6. Solr——从postgresql数据库导入数据

    1,配置准备 本文的前提是你已经配置好了solr,并新创建了一个core,我们下面都会按照前一篇文章中的core_demo为基础开始 2,修改soreconfig.xml 在soreconfig.xm ...

  7. html中header,footer分别固定在顶部和底部

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>page01</title> 5 <styl ...

  8. JVM总结-Java 虚拟机是怎么识别目标方法（上）

    重载与重写 在 Java 程序里,如果同一个类中出现多个名字相同,并且参数类型相同的方法,那么它无法通过编译.也就是说,在正常情况下,如果我们想要在同一个类中定义名字相同的方法,那么它们的参数类型必须 ...

  9. list 列表 和一些操作方法

    1. 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 列表存在索引和切片. 和字符串是一样的. 2. 相关的增删改查操作(重点) 添 ...

  10. BZOJ4195 luoguP1955 NOI2015D1T1 程序自动分析

    题意:给定n个(xi = xj) 或 (xi != xj) 的条件,问是否可能成立 BZOJ链接:http://www.lydsy.com/JudgeOnline/problem.php?id=419 ...