html+css手机端自动适应

<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" />

原文地址:https://www.cnblogs.com/Iven-zhang/p/10011403.html

时间: 2024-10-13 18:54:14

html+css手机端自动适应的相关文章

javascript判断访问终端,手机端自动跳转

在网页的顶部加入javascript判断代码: function checkserAgent(){ var userAgentInfo=navigator.userAgent; var userAgentKeywords=newArray("Android", "iPhone" ,"SymbianOS", "Windows Phone", "iPad", "iPod", "MQ

Tp5 判断电脑手机端 自动切换

//判断是否是手机function is_mobile(){ $user_agent = $_SERVER['HTTP_USER_AGENT'];    $mobile_agents = Array("240x320","acer","acoon","acs-","abacho","ahong",        "airness","alcatel"

手机端跳转和pc端跳转

http://jingyan.baidu.com/article/cdddd41c61823e53cb00e198.html 参考网址 浏览:11532 | 更新:2014-04-22 16:51 第一种方法: <script> if(navigator.platform.indexOf('Win32')!=-1){ //pc //window.location.href="电脑网址"; }else{ //shouji window.location.href="

做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致.大家可以查看这个Demo(记得打开Chrome DevTools). 就如上图所示,你可以发现,原本指定的字体大小是24px,但是最终计算出来的却是53px,看到这诡异的结果,我心中暗骂一句:这什么鬼! 随后开始对问题各种排查:某个标签引起的?某个CSS引起的?又或者是某句JS代码引起的.通过一坨坨的删代码,发现貌似都不是.我不禁又骂,到底什么鬼!不过中间还是发现了一些端倪:当页面中的标签数量或者文本数

ecshop开发日志之手机端虚拟商品自动发货

在ecshop官方模版收,web端的虚拟商品购买后不能像pc端那般直接在付款后出现虚拟商品的卡号,密码,截止日期一下为让手机购买也可以在付款后自动显示发货并能显示卡号密码截止日期首 先找到pc端的flow.php文件中的$_REQUEST['act'] = 'done'  这里面是用来处理订单的最后一步,(具体怎么知道的可以看url后的参数列表),对应手机端处理订单的的文件为 mobile/order.php 文件,这里同样有一个$_REQUEST['act'] = 'done',对比里面的代码

WEB手机端界面绝对定位分辨率扩大导致错乱问题和块级元素旋转角度CSS

首先头部添加 意识是等比例缩放 做的时候发现了一些问题: 之前设置body背景图片为no-repeat 宽度100% 定于父级容器为position:relative: 然后定义你做要的div position: absolute: 但是发现web手机端分辨率变大,定位根据图片所在的位置错乱了. 比如iPhone5的分辨率为320*568 三星是s4的分辨率为340*640 如果不想定位错乱 , 可以设置背景图片 background-size:宽度和高度:不超过分辨率的宽度即可, 比如苹果 的

【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽了,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视频广告!),之前用canvans渲染,感觉不够太完美,又弄成背景切换形式得(用背景切换形式可以完美解决当一个容器有transform:rotate(90deg)属性时自适应百分比问题,若是canvans需去计算高宽太麻烦还需考虑不同系统). 想要手机端h5播放时不自动全屏比想象的简单,看加粗部分,一

【重播工具箱】MTK全方案手机端APP,一键备份自动生成线刷包 源码思路解析

这个是本人MTK工具箱,在 5月份的时候,发布的..功能可能说是全球首发把,第一个手机MTK的一键备份工具,而且是兼容MTK全方案.MTK6589 MTK6592 6575 82等, 现在将源码以及思路,分享给大家,有兴趣的可以看看. 源码解析以及思路,待发布....... 分享地址:http://www.592zn.com/thread-311286-1-1.html 下载地址http://pan.baidu.com/s/1hqeethy重大更新: 1.手机端首发,备份MTK系列全自动,生成线

简单手机端头部设置 及css代码

<html> <head> <title>今日报表</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> </he