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

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

其中：

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

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

initial-scale=1.0：表示初始的缩放比例(初始规模为1.0倍，即原始大小)

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

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

user-scalable=yes或者1：表示用户是否可以调整缩放比例(no或者0：表示不可调整缩放比例)

target-densitydpi：

一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的 取值范围

  • device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。

  • high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。

  • medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.

  • low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。

  • <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

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

html+css手机端自动适应的更多相关文章

  1. 关于实现手机端自动获取天气的demo

    博主大二做的一个项目,当时很傻很天真,但是还是贴出来,希望能给大家一点帮助.欢迎转载哦!我的博客园地址:http://www.cnblogs.com/natureless/ 首先分析需求,移动端实现天 ...

  2. javascript判断访问终端，手机端自动跳转

    在网页的顶部加入javascript判断代码: function checkserAgent(){ var userAgentInfo=navigator.userAgent; var userAge ...

  3. css——手机端图片正确显示

    这两天遇到的问题汇总(一): 1.图片在app端显示有差异:如下                        左边图片是:图片显示太大,以至于让整个页面都失真的效果:右边是调好样式之后的效果,知道增 ...

  4. Web Form 取消手机端自动转换

    将项目中的Site.Mobile.Master排除重新发布即可

  5. 手机端跳转和pc端跳转

    http://jingyan.baidu.com/article/cdddd41c61823e53cb00e198.html 参考网址 浏览:11532 | 更新:2014-04-22 16:51 第 ...

  6. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

  7. 【极品代码】一般人我不告诉他，手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  8. ecshop开发日志之手机端虚拟商品自动发货

    在ecshop官方模版收,web端的虚拟商品购买后不能像pc端那般直接在付款后出现虚拟商品的卡号,密码,截止日期一下为让手机购买也可以在付款后自动显示发货并能显示卡号密码截止日期首 先找到pc端的fl ...

  9. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

随机推荐

  1. 感受野RF的计算

    参考博客:https://blog.csdn.net/wgx571859177/article/details/80983043 设第N层的感受野为N_RF,卷积核尺寸为kernel_size,步长为 ...

  2. python安装过程中的一些问题

    因为看到大神的教程是基于python V2.7,下载该版本且安装成功. 安装目录: https://www.python.org/download/releases/2.7/ 根据系统进行安装包下载 ...

  3. Filebeat 启动关闭流程

    启动阶段: instance/beat.go #打印home路径.配置路径.数据路径和日志路径 seccomp #Syscall filter检查 instance/beat.go #beat inf ...

  4. 无向图 解决Unity地图上固定网络上，标记走固定步数能到达的位置

    首先需要了解无向图的定义 参考:https://www.cnblogs.com/wxgblogs/p/5572391.html 我们选择链表的方式进行操作. int StartPositon; int ...

  5. JavaScript 判断对象中是否有某属性

    判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式. 一.点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined. ...

  6. web.xml 简记

    web.xml (tomcat启动时读取的配置文件) 首页配置 <welcome-file-list>:index.jsp servlet配置(<servlet>和<se ...

  7. django信号浅谈

    Django中提供了“信号调度”,用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 1.Django内置信号 Model signals pre_in ...

  8. C# Entity To Json

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  9. dynamic动态类型的扩展方法

    对于一个动态类型来说,你可以认为它包含任意成员,它们都能通过编译.但到了运行时,到底是否拥有这些成员,就真相大白了.如 dynamic test = ; Console.Write(test.Name ...

  10. Python 官方文档解读(2)：threading 模块

    使用 Python 可以编写多线程程序,注意,这并不是说程序能在多个 CPU 核上跑.如果你想这么做,可以看看关于 Python 并行计算的,比如官方 Wiki. Python 线程的主要应用场景是一 ...