<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. Gitlab_ansible_jenkins三剑客⑤jenkins Pipeline-job的使用

    Pipeline-job的使用 创建Pipeline任务 找到root用户的id 编写pipeline脚本 #!groovy pipeline{ agent {node {label 'master' ...

  2. 简单的接口测试类和测试生成报告工具HTMLTestRunner.py

    Demo.py #coding:utf-8 # import requests import json ''' data = { 'username':'jackson', 'password':'a ...

  3. C#实现在foreach中删除集合中的元素

    List<string> str = new List<string>(); str.Add( "zs"); str.Add("ls") ...

  4. Ubuntu VMware workstation虚拟机清理缓存文件获得更大硬盘空间

    1 前言 VMware workstation 15 Player经常使用拖拉复制文件到虚拟机,从而导致了drag_and_drop特别大,占用了很多硬盘空间. fanbi@ubuntu:~/.cac ...

  5. Lesson 2-1 （数据结构，序列通用的操作）

    2.0 数据结构 --- 数据结构是以某种方式组合起来的数据元素集合. --- python的常见的数据结构 2.1 序列(sequence) --- 序列中的每个元素都有编号,即索引(也称为下标). ...

  6. Django 之 流程和命令行工具

    一.一个简单的web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所 ...

  7. 小米平板4 Plus获取Root超级权限的步骤

    小米平板4 Plus有么好方法开启Root权限?大家都清楚,Android机器有Root权限,一旦手机开启root相关权限,就可以实现更强大的功能,打比方大家部门的营销部门的同事,使用个别营销应用都需 ...

  8. js逗号表达式

    在js中的某些场景,","是一种运算符号,只不过他的优先级要低于普通的原酸符,在变量声明或者return中,经常看到逗号表达式. 声明变量: var a=1,b=2,c=3; co ...

  9. bootstrap学习（二）页面

    响应式图片: //当图片大的时候,逐渐缩小浏览器大小,图片会显示为自适应大小 ,img-responsive <div class="container"> <d ...

  10. golang自动构建脚本

    #!/bin/sh #代码分支 branch_c=$ branch_p=$ #服务器 server=$ #构建版本 version=$ case $server in test1) echo &quo ...