zoukankan      html  css  js  c++  java
  • html兼容手机浏览器

    其实主要就是改掉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>
  • 相关阅读:
    屏蔽鼠标右键/F1帮助
    vs2010如何连接到mysql数据库
    经典的数据库设计贴吧
    js子窗口刷新父窗口
    数据库三大范式
    写给毕业生
    SQL Server权限数据库设计
    .NET
    ASP.NET MVC框架(第一部分) 【转】
    什么是SQL注入法攻击 .
  • 原文地址:https://www.cnblogs.com/wind-wang/p/6943649.html
Copyright © 2011-2022 走看看