如何使用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 ...
随机推荐
- maven项目使用自己创建的jar包--maven without test code
eclipse版本为2018-12(4.10.0) 1.创建一个jar包 首先自己建立了一个maven project,名为jweb.GAV坐标: <groupId>amberai< ...
- ELK结合logback
之前ELK的安装可以查看前面一篇博客 下面是我的logback的配置文件,通过logback的appender直接导入logstash <?xml version="1.0" ...
- cocos2d 15款游戏源码
https://blog.csdn.net/jailman/article/details/78678972
- 苹果cms如何添加播放器预加载和缓冲广告
1,来到系统后台>>系统>>播放器参数设置 可以看到添加预加载和缓冲广告的输入框.文件格式为html 自己写一个html的网页上传到网站进行调用即可.链接前面不要加http或 ...
- VTK 编译过程中出现的hdf5长度(I64)错误解决办法
最近在使用vtk和cuda做大规模图像处理方面的问题研究,在编译vtk的过程中发现第三方库hdf5不能够解决I64长度的探测识别问题.为了节约大家的时间,现在把我经过实践得到的解决方案共享出来,这里要 ...
- Spring Cloud Stream教程(二)主要概念
Spring Cloud Stream提供了一些简化了消息驱动的微服务应用程序编写的抽象和原语.本节概述了以下内容: Spring Cloud Stream的应用模型 Binder抽象 持续的发布 - ...
- 如何隐藏scroll-Y纵向滚动条,并不影响内容滚动的方法
网上搜了很多关于隐藏滚动条的文章,发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说.本文章将介绍3种隐藏滚动条的方法,大家可以结合实际情况,参考文章内 ...
- spring boot + mybatis + layui + shiro后台权限管理系统
后台管理系统 版本更新 后续版本更新内容 链接入口: springboot + shiro之登录人数限制.登录判断重定向.session时间设置:https://blog.51cto.com/wyai ...
- Stream的并行计算
一.Stream并行计算体验,利用多核加快计算速度 stream的并发,多个cpu执行同一个任务,提高效率: 需求:从1+...+10000000,看下各种计算方法的运行时间是多少 代码例子如下: p ...
- PushConsumer 消费消息
CLUSTERING 模式下,消费者会订阅 retry topic // DefaultMQPushConsumerImpl#copySubscription private void copySub ...