<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. Visual Studio 安装OpenCV及问题总结

    1.VS安装OpenCV基本步骤 1)安装Visual Studio 下载网址https://opencv.org/releases.html# 2)安装OpenCV 下载网址https://www. ...

  2. module.exports和 exports 方法暴露

    在Node.js包管理时需要把方法暴露给外部文件 文件:Hello.js    Hello方法是模仿面向对象类的写法 function Hello() { var name; this.setName ...

  3. 每隔5s执行一次动作

    TimeSpan timespan; //第一次获取系统时间 DateTime d1 = DateTime.Now; while (true) { //第二次获取系统时间 DateTime d2 = ...

  4. C# 获取电脑硬盘剩余空间

    获取本地硬盘的所有剩余空间: 主要应用到System.IO类库的:Driveinfo.Directory,将model转换成json需要用到Newtonsoft.Json.JsonConvert.Se ...

  5. 机器学习kNN

    from numpy import * import operator def createDataSet(): group = array([[1.0, 1.1], [1.0, 1.0], [0, ...

  6. unity3D使用C#遍历场景内所有元素进行操作

    最近入门Unity3D,跟着教程做完了survival射击游戏,就想加一个功能,就是按一个按钮屏幕上的怪物都清空. 如图右下角所示. 我的方法是赋予所有怪物一个标签Tag,然后根据标签销毁Gameob ...

  7. 深入理解java线程池—ThreadPoolExecutor

    几句闲扯:首先,我想说java的线程池真的是很绕,以前一直都感觉新建几个线程一直不退出到底是怎么实现的,也就有了后来学习ThreadPoolExecutor源码.学习源码的过程中,最恶心的其实就是几种 ...

  8. SharePoint 2013 - REST Service

    0. SharePoint 2013使用_api来标识出 REST SERVICE,REST Service其实是 client.svc web service的一部分,但为了简化 REST URI的 ...

  9. 配置一个高效快速的Git环境

    username and email editor difftool and mergetool alias 可以直接修改~/.gitconfig文件,也可以用命令配置一个可以实际使用的高效的Git环 ...

  10. WAKE-WIN10-SOFT-软件-Matlab配置及工具箱

    1Matlab 1,1Matlab下载,安装,配置,,, 1,2 2工具箱 2,1LibSVM 必应:https://www.bing.com/search?q=libsvm&qs=n& ...