<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. CentOS6.5 下在Nginx中添加SSL证书

    原文:https://www.cnblogs.com/wuling129/p/5039978.html 证书过期 ,更新证书,记录下 一.安装相关支持库:(未实践) yum -y install gc ...

  2. gatewayworker开发单聊应用解决的问题

    绑定唯一id时,遇到的信息发送同步问题 问题:A-B A-C A发送信息给B和C时  A绑定了唯一id  若B.C发送信息给A则A处会同时手到来自于BC的信息 用解绑和生成新的client_id无法避 ...

  3. Elastichsearch实践——基本使用

    官网文档:https://www.elastic.co/guide/cn/elasticsearch/guide/current/getting-started.html es中的索引.类型.文档可以 ...

  4. Mac上重置mysql 5.7密码

    Mac上重置mysql 5.7密码 >我的mac系统是osx 10.12 装完mysql5.7之前根本登录不上,网上说用DMG方式装完后,后弹出一个框,上面会有临时密码,但是我安装的时候却手一抖 ...

  5. 怎样解决if __name__ == "__main__":下面的代码没有执行的问题

    很多初学者可能在用pycharm运行代码时会出现if __name__ == "__main__":下面的代码没有执行的问题,出现这类问题的原因是unittest运行姿势造成的,如 ...

  6. JSON字符串自动转换

    package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObj ...

  7. thinkphp查询某个字段为空的数据

    $where['name'] = ['exp', 'is null']; //为空的 $where['name'] = ['exp', 'is not null']; //不为空的

  8. linux安装postgresql简洁版

    环境: linux 7.+ postgresql 10.5 1.下载10.5版本的源码,make后成可执行版本 2.创建数据库   initdb -D   /xxx/yyy(对应为数据目录,提前创建好 ...

  9. 大数据学习之hdfs集群安装部署04

    1-> 集群的准备工作 1)关闭防火墙(进行远程连接) systemctl stop firewalld systemctl -disable firewalld 2)永久修改设置主机名 vi ...

  10. Hadoop HDFS安装、环境配置

    hadoop安装 进入Xftp将hadoop-2.7.3.tar.gz 复制到自己的虚拟机系统下的放软件的地方,我的是/soft/software 在虚拟机系统装软件文件里,进行解压缩并重命名 进入p ...