手机端适配代码

!function() {
    function setFontsize() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 16 + "px";
    }
    var _t = null;
    window.addEventListener("resize", function() {
           clearTimeout(_t);
           _t = setTime0ut(setFontSize, 100);
    }, false);    
    setFontSize();
}(window);

这段代码在项目中使用,暂时没有用户反馈有什么问题。如果有同学发现有问题,还望告知。

项目: c.jinggege.com

其他同学接收后,前端代码引入了较多内容。但该段代码该是在继续使用。

时间: 2024-10-12 02:23:54

手机端适配代码的相关文章

jquery支持PC端手机端幻灯片代码

分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式.交果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="flex"> <ul class="slides"> <li data-title="Slide 1"> <img alt="" src="img/beasts_feature.jpg

thinkphp 网站模板 电脑端手机端切换代码

ThinkPHP的模板主题机制,如果只是在PC,只要需修改 DEFAULT_THEME (新版模板主题默认是空,表示不启用模板主题功能)配置项就可以方便的实现多模板主题切换. 但对于移动端和PC端,也许你会设计完全不同的主题风格,且针对不同的来路提供不同的渲染方式,其中一种比较流行的方法是“响应式设计”,但就本人经历而言,要实现完全的“响应式设计”并不是那么容易,且解决兼容问题也是个难题,假设是大型站点,比如:淘宝.百度.拍拍这些,响应式设计肯定是满足不了需求的,而是需要针对手机访问用户提供单独

手机端适配方案 媒体查询和flexbale

方法一  flexible 一.npm 包安装 lib-flexible 淘宝适配方案 px2rem px自动转rem npm install lib-flexible --save npm install px2rem-loader 二.在main.js中引入lib-flexible** import 'lib-flexible/flexible.js' 三.配置build/utils.jsvar px2remLoader = { loader: 'px2rem-loader', option

用jQuery.touchSwipe插件实现手机端场景滑动切换效果

使用jQuery的touchSwipe插件监听触摸滑动事件,结合css3实现手机端场景滑动切换效果.最好在手机端测试代码,也可以在PC端用鼠标点击模拟滑动. 1.html代码: <div class="container"> <div class="page page0 page_current"> <h1>你好,我是0号屏幕,第一屏,鼠标单击向下/向上拖动</h1> </div> <div clas

(淘宝无限适配)手机端rem布局详解

一.        首先我们先来看看淘宝不同分辨率下的适配页面 可以看出来,淘宝在不同的分辨率下,页面的尺寸和模块间的间距会发生变化,这是因为淘宝采用了rem,这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识,以为更好的理解淘宝布局的方案,下面我们来看一些移动端的知识 二.了解一些移动端的知识viewport的<meta>标签用法 其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大 移动端开发中,通常我们都会采用<meta nam

CSS3及JS简单实现选项卡效果(适配手机端和pc端)

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

将PC端的网站转化成手机端网站需要增加以下这段代码即可,再布局一下界面即可

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 将PC端的网站转化成手机端网站需要增加以下这段代码即可,再布局一下界面即可,布布扣,bubuko.com

HTML5手机端手指滑动上拉加载代码

在线预览   源码下载 HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发.该特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

手机端 摇一摇功能 代码实现

手机端网页上的摇一摇效果,js代码如下 var speed; //判断手机是否有摇一摇功能 if (window.DeviceMotionEvent) { //绑定devicemotion事件 window.addEventListener('devicemotion',deviceMotionHandler, false); }else{ alert('您的设备不支持摇一摇功能,系统将自动为您摇动手机^_^'); speed = 888; //不支持摇一摇时,修改speed值触发摇动手机事件