<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. HTML+Css让网页自动适应电脑手机屏幕

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  2. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

  3. js网页如何获取手机屏幕宽度

    function a(){"屏幕宽高为:"+screen.width+"*"+screen.height:}其它:网页可见区域宽:document.body.c ...

  4. web页面自适应手机屏幕宽度

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  5. html+css手机端自动适应

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  6. 页面适应电脑和手机屏幕initial-scale 1：0 user-scalable=yes

    2017年09月25日 11:30:27 Goddess_liangyanli 阅读数:7324 标签: 手机   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  7. 第一章 关于html适应手机屏幕的写法

    在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度: <meta name="viewport" content="width=device-widt ...

  8. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  9. 7个步骤让PC网站自动适配手机网页

    传统的网站如何完成向移动设备的快速转型? 通过移动适配技术可以实现,切图网是国内首家基于web技术服务的公司,而移动适配主要通过底层的web技术开发手段来完成,下面切图网将从技术角度来告诉你通过7个步 ...

随机推荐

  1. nyoj 104——最大和——————【子矩阵最大和】

    最大和 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 给定一个由整数组成二维矩阵(r*c),现在需要找出它的一个子矩阵,使得这个子矩阵内的所有元素之和最大,并把这个 ...

  2. 关于Javascript模块化和命名空间管理的问题说明

    最近闲下来的时候,稍微想了想这个问题.关于Javascript模块化和命名空间管理 [关于模块化以及为什么要模块化] 先说说我们为什么要模块化吧.其实这还是和编码思想和代码管理的便利度相关(没有提及名 ...

  3. MVC5 下拉框绑定(单选)

    1.Model [Display(Name = "学历")] public ICollection<System.Web.Mvc.SelectListItem> asd ...

  4. ExecutorService的invokeAny方法

    一.此方法获得最先完成任务的结果,即Callable<T>接口中的call的返回值,在获得结果时,会中断其他正在执行的任务 示例代码: import java.util.ArrayList ...

  5. Angular-cli 构建应用的一些配置

    Angular-cli 构建应用 的一些配置 标签(空格分隔): Angular 直接使用 ng build --prod --build-optimizer --base-href=/ 来发布 ba ...

  6. Do the Untwist

      Do the Untwist Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  7. 【Hibernate那点事儿】—— Hibernate应该了解的知识

    前言: 最近由于有点时间,就像深入的学习一下Hibernate.之前只是简单的使用,并没领会它的妙处.这里就趁着分享的机会,好好整理一下. 这篇主要讲到了下面几个部分: Hibernate框架 Hib ...

  8. 使用错误的操作系统用户exp数据导致ORA-15186错误

    生产环境alert日志中出现如下错误:Fri Dec 30 14:28:28 2016Errors in file XXXXXX.trc:ORA-15186: ASMLIB error functio ...

  9. java基础重点： 面向对象，

    java分了5片内存. 1:寄存器.2:本地方法区.3:方法区.4:栈.5:堆. 栈:存储的都是局部变量 ( 函数中定义的变量,函数上的参数,语句中的变量 ):只要数据运算完成所在的区域结束,该数据就 ...

  10. Android开发学习之TabView选项卡具体解释 -- 基于Android4.4

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/he90227/article/details/24474197 直接上代码 -- 基于Android ...