移动设备页面自适应

;(function(){
    var w = parseInt(window.screen.width),
        s = w/640,
        u = navigator.userAgent.toLowerCase(),
        m = ‘<meta name="viewport" content="width=640,‘;
    if (/android (\d+\.\d+)/.test(u)){
        if(parseFloat(RegExp.$1)>2.3) m += ‘minimum-scale=‘+s+‘,maximum-scale=‘+s+‘,‘;
    }else{
        m += ‘user-scalable=no,‘;
    }
    m += ‘target-densitydpi=device-dpi">‘;
    document.write(m);
}());
时间: 2024-08-29 18:22:11

移动设备页面自适应的相关文章

微信公众平台开发 - 页面自适应

通过以下标签实现页面自适应: <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [ye

rem手机端页面自适应完美解决方案(最新)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ! function(e) { function t(a) { if(i[a]) return i[a].exports; var n = i[a] = { exports: {},

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

JavaScript提高:003:easy UI实现tab页面自适应问题

前面说到使用easyUI在asp.net中实现了tab控件效果.http://blog.csdn.net/yysyangyangyangshan/article/details/38307477不过有一个问题,div的宽度太宽了,而且不随页面变化而改变.网上搜索了下,发现很多人也碰到过,而且也有解决的办法.下面看看吧.实现tab的部分代码如下:引用的easyui文件参考上文. <div id="tabTop" class="easyui-tabs"> &

JavaScript---手机端--页面自适应

在公司新学了一种页面自适应的方式: //等比缩放 !(function(doc, win) { var timer, docEle = doc.documentElement,//获取body evt = "onorientationchange" in window ? "orientationchange" : "resize",//获取手机旋转事件 setFontSize = function() { var width = docEle.

初试swiper插件(一)-让页面自适应高度

当我使用这个插件时发现不可以在每一节上写上height:auto或者height:100%,如果使用这样的确可以让页面自适应高度,但是分页器会不显示在页面的的中间,而且并不是每一页的显示. 如: 此时应该要给swiper-container类  设置如下即可. .swiper-container { width: 100%; height: 100%; } 完成! 原文地址:https://www.cnblogs.com/ZwjFronTend/p/broken_life.html

HTML页面自适应__资料

1. HTML5 移动页面自适应手机屏幕四类方法 - CSDN博客.html(https://blog.csdn.net/hesi9555/article/details/70171588) 如何使网页宽度自动适应手机屏幕的宽度? - 好笑. - 博客园.html(https://www.cnblogs.com/zwtqf/p/7667705.html) 如何把一个pc页面自适应手机屏幕_百度知道.html(https://zhidao.baidu.com/question/1821447014

页面自适应与rem

在写前端页面的时候经常会用到rem,也在网上看了别人对rem的介绍,详细的情况就不在此描述,只说一下我对rem的看法和用法. 在我看来,rem 是一种相对的尺度,相对于根元素设置的font-size,比如: html { font-size: 16px; } 那么,在别的地方使用rem的时候 1rem 就会等于 16px.这算是对rem最基础的应用,但是这种使用方式和直接使用px没有任何区别,只是单位不一样,需要进行换算.既然rem 是一种相对尺度,最常用于页面自适应,我们就不能简单粗暴的直接对

页面通过CSS实现页面自适应

自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术,它需要开发多套界面来适应不同的终端. 下面我是简单以body作为类,进行样式定义 index.css如下: 1 /* 页面没有超过640px引用这个样式 */ 2 @media screen and (max-width: 600px){ 3 body{ 4 background-color: #13c2c3; 5 } 6 } 7 8 /*大于600px,小于900px之间的背景颜色*/ 9 @media (mi