网页自适应屏幕

网页自适应手机、电脑屏幕的设置方法

　　<head>

　　<meta name="viewport"

　　content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />

　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

　　<link rel="stylesheet" type="text/css" />

　　<script src="jquery.min.js"></script>

　　<title>Insert title here</title>

　　</head>

　　<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

　　第一个meta标签表示：

　 强制让文档与设备的宽度保持1：1；

　 文档最大的宽度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）；

　 user-scalable定义是否可缩放（0为不缩放），使页面固定设备上面的大小。

时间： 2024-11-10 07:44:15

网页自适应屏幕的相关文章

2015.3.10（自适应屏幕和弹性布局）

今天做的练习是自适应屏幕大小,遇到了一些困难,困难在于我以前用CSS布局的时候都是使用PX作为单位来进行定位布局. 但今天把网页拓展实验到了我家的电视(42寸)上,此时就出现了问题,问题之一就是:没有办法填充满屏幕,只能出现一个屏中屏,看起来非常的别扭. 试验了纯CSS来做到自适应屏幕和用JS获取屏幕大小然后计算比例填写在CSS中两种方法均不是很满意,问题直到现在也没有解决,在问题解决之前先把这个问题解决过程记录下来. html部分的代码是这样的 CSS部分的代码是这样的: body{ font

Div 自适应屏幕大小

http://blog.csdn.net/wodetiankong516/article/details/7827256 Background      有时, 我们需要将div或者其他的Element 自适应屏幕,窗口以及浏览器 , 这样会提高页面美观,提升用户体验, 只是个小问题,但是它用到的知识还是可以吸收一下. Knowledge prepared      这里准备下我们所要了解的一些size属性,有助于我们设置自己需要的大小.descriptionattribute name网页可见

网页自适应不同浏览设备的方法

网页自适应可使网站从桌面电脑显示器到智能手机或其他移动产品设备上具有更好的阅读体验,具体方法如下: 1.在HTML头部增加viewport标签. 在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放.代码如下: <meta name="viewport" content="width=device-width, initial-scale=1" /> 这段代码支持Chrome.Firefox.I

70.JS---利用原生js做手机端网页自适应解决方案rem布局

利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.s

iframe去滚动条+自适应屏幕大小

iframe去滚动条 <iframe name="myFrame" id="myFrame" frameborder="0" src="tab.action" style="margin:0 auto;width:100%;height:100%;" scrolling="no"></iframe> iframe自适应屏幕大小 function resetIfra

20160622 html5移动页面自适应屏幕宽度

html5移动页面自适应屏幕宽度 1.使用meta标签,在头部加入下面代码 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 2.用百分比,‘百’指的是父元素,这只适合布局简单的页面,复杂的页面实现很困难. 3.用CSS相对单位rem. 4.媒体查询@m

Android -- Webview自适应屏幕

第一种                                                                                          WebSetting settings = webView.getSettings(); settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 把所有内容放在webview等宽的一列中.(可能会出现页面中链接失效) 第二种             

Android webView 支持缩放及自适应屏幕

//支持javascript web.getSettings().setJavaScriptEnabled(true); // 设置可以支持缩放 web.getSettings().setSupportZoom(true); // 设置出现缩放工具 web.getSettings().setBuiltInZoomControls(true); //扩大比例的缩放 web.getSettings().setUseWideViewPort(true); //自适应屏幕 web.getSettings

自适应屏幕宽度的居中布局

div{ height:200px; color:#F00;} .left{ float:left; width:100px; background:#00f; _margin-right:-3px;} .right{ float:right; width:100px; background:#0f0; _margin-left:-3px;} .center{ background:#333; margin:0 100px; _margin:0 97px;} <div class="lef