<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. Codeforce 609 C—— Load Balancing ——————【想法题】

    C. Load Balancing time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  2. Java 枚举 获取前后元素，下一个元素

    https://blog.csdn.net/jiangshanwe/article/details/79119219

  3. Web程序中使用EasyUI时乱码问题

    今天偶然遇见使用easyUI时,弹窗和分页都是乱码的问题,耗费了很长的时间来解决,以此记住这个坑. 相信大家都会在使用easyUI时都会设置这样一句: 那么就有可能出现设置中文后的乱码问题,如下图: ...

  4. scp命令的使用

    scp命令是什么 scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令. scp命令用法 scp [-1246BCpqrv] [-c cipher ...

  5. 又到圣诞节，让你的网页下起雪(js特效)

    又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...

  6. Android SDK 目录和作用详解

    1.add-ons这里面保存着附加库,比如GoogleMaps,当然你如果安装了OphoneSDK,这里也会有一些类库在里面.也可以是厂商自己制作的add-ons.开发中该文件是可选的,如果你没有用到 ...

  7. linux搭建nginx图片服务器

    1:参考http://blog.csdn.net/u012401711/article/details/53525908

  8. gamemakerstudio:加载精灵

    如果精灵图片不是单一图片(拥有子图)可以称它为长条图,当gamemakerstudio加载这类精灵图片时,我们给图片名字命名为*_strip列数.*,这样当加载图片时gamemakerstudio会自 ...

  9. centos7部署ethereum私有链

    https://github.com/ethereum/go-ethereum/wiki http://book.8btc.com/books/6/ethereum/_book/public-chai ...

  10. static final int DEFAULT_INITIAL_CAPACITY = 1 << 4; // aka 16

    查看HashMap源码,发现这个static final int DEFAULT_INITIAL_CAPACITY = 1 << 4;  值为16. 这个是位移算法. 例如: 4<& ...