如何使用js在移动端和PC端居中
在手机移动端和PC端控制居中是一个很蛋痛的问题,因为屏幕宽度在变化,所以就不要写死样式,那么我想用JS来控制,灵活的控制宽度,需要注意这三个时候:
(1)首先需要在页面刚加载的时候就调用此函数,
(2)屏幕在变化的时候,即onresize也需要调用
(3)自己要写出这个函数出来
$(function(){
loginCenter();
$(".loginCodeInput").val("").focus();
$(".loginCodeInput").bind("input", function() {
$(".loginError").hide();
});
$(".loginButton").click(onLoginButtonClick);
$(".projectTitleReturn").click(onProjectTitleReturnClick);
$(".projectTitleDetail").click(onProjectTitleDetailClick);
$(".itemTitleReturn").click(onItemTitleReturnClick);
});
$(window).resize(function(){
loginCenter();
});
function loginCenter(){
var windowWidth = $(window).width();
var marginLeft = (windowWidth - $(".center").width()) / 2;
$(".center").css("margin-left", marginLeft);
}
如何使用js在移动端和PC端居中的更多相关文章
- js判断游览器是移动端还是PC端
js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...
- js判断是移动端还是pc端
运行页面的时候,执行到js会判断来自于移动端还是pc端,如果是移动端则跳转制定链接地址,这样在手机端会有额外的不必要浪费的加载时间 var browser={ versions:function(){ ...
- js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结
1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...
- js判断移动端还是PC端
function isMobile(){ var sUserAgent= navigator.userAgent.toLowerCase(), bIsIpad= sUserAgent.match(/i ...
- JS 判断移动端与PC端
js判断移动端与pc端 这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...
- JS判断移动端还是PC端(改造自腾讯网) 仅用于宣传动画,下载页等
JS判断移动端还是PC端(改造自腾讯网 http://www.qq.com/) 本脚本仅用于宣传动画,下载页( ipad 也算pc端)等, ionic 用 ionic.platform 即可( io ...
- JS判断android ios系统 PC端和移动端
最近公司上线移动端,需要根据不同的系统跳转到不同的产品页面,百度后发现这一段代码很好用,不但可以判断当前是什么系统,还能知道当前浏览器是什么内核,移动端PC端都已测试无问题! var browser ...
- JavaScript判断移动端及pc端访问不同的网站
JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...
- 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...
随机推荐
- z-tree的使用
1.参考资料 1)官网:http://www.treejs.cn/v3/api.php 2)z-tree码云:https://gitee.com/zTree/zTree_v3 2.下载解压 案例演示: ...
- 苹果cms模板文件不存在:public/jump.html
1,模板文件不存在很显然就是模板缺少文件导致,缺少什么文件一般都会提示.(如上图)点击首页的时,有的能进入播放页 有的提示(上图) 模版文件不存在:public/jump.html 通过查询苹果cm ...
- 论文阅读:Elastic Scaling of Stateful Network Functions
摘要: 弹性伸缩是NFV的核心承诺,但在实际应用中却很难实现.出现这种困难的原因是大多数网络函数(NFS)是有状态的,并且这种状态需要在NF实例之间共享.在满足NFS上的吞吐量和延迟要求的同时实现状态 ...
- codeforces#403—B题(二分,三分)
B. The Meeting Place Cannot Be Changed time limit per test 5 seconds memory limit per test 256 megab ...
- [CSP-S模拟测试]:异或(数学)
题目描述 给定$L,R$,我们希望你求出:$$\sum\limits_{i=L}^R\sum\limits_{j=L}^R(i\oplus j)$$其中这里的$\oplus$表示异或运算.答案对$10 ...
- 使用Runnable接口创建线程池
步骤: 创建线程池对象创建 Runnable 接口子类对象提交 Runnable 接口子类对象关闭线程池实例: class TaskRunnable implements Runnable{ @Ove ...
- 《Effective Java》读书笔记 - 3.对于所有对象都通用的方法
Chapter 3 Methods Common to All Objects Item 8: Obey the general contract when overriding equals 以下几 ...
- 【机器学习速成宝典】模型篇03逻辑斯谛回归【Logistic回归】(Python版)
目录 一元线性回归.多元线性回归.Logistic回归.广义线性回归.非线性回归的关系 什么是极大似然估计 逻辑斯谛回归(Logistic回归) 多类分类Logistic回归 Python代码(skl ...
- layer系列之table导出+打印功能总结
1.关于layui导出方式,直接使用layui(版本2.4.5及以上)自带的导出方法即可: layui官网地址:https://www.layui.com/ 源码如下: <!DOCTYPE ht ...
- MyBaits动态sql语句
1 在接口中书写方法 public interface EmployeeMapperDynamicSQL { public List<Employee> getEmpsTestInnerP ...