如何使用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 ...
随机推荐
- POJ 2289 多重二分匹配+二分 模板
题意:在通讯录中有N个人,每个人能可能属于多个group,现要将这些人分组m组,设各组中的最大人数为max,求出该最小的最大值 下面用的是朴素的查找,核心代码find_path复杂度是VE的,不过据说 ...
- 搭建一套简单的web服务器,记录实验过程
搭建web服务器 一.实验内容: 实验要求: 1.完成一个简单的web服务器,web服务器从mysql里读取数据进行返回 2.Mysql需要有一个单独的数据盘,每个mysql虚拟机的磁盘挂载方式需要都 ...
- 用flask进行web开发
经理管理一个餐厅,推出每天都有特色菜的营销模式.他想根据一周中的每一天有一种特色菜. 客人想知道当天的特色菜是什么.另外再添加一个介绍页面.bios路径下,显示餐厅主人,厨师,服务生的简介. pyth ...
- NBU5240备份系统还原数据库---Windows版
NBU5240是一个基于系统文件和多种数据库备份的灾备系统,灵活性比较高.下面具体记录如何利用该系统的备份文件进行数据库还原.(基于业务场景) 公司某业务部门突然发现前台系统数据有异常,已经是几天前的 ...
- 最全的Android开发资源整理--进阶必备
原文链接: http://stormzhang.github.io/android/2014/06/05/android-awesome-resources/ (友情提醒:最近google的很多服务被 ...
- 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
let carr = [{ "code": "000", "agyTypeCode": "1", "name& ...
- iOS 自定义一对UI表现相反的按钮
假如有一对按钮[重置][提交],要让他们的默认UI和点击的UI表现刚好相反 [提交]按钮,默认橙色,点击边框是橙色,字体是橙色,背景变白色 [重置]按钮,默认白色橙色,边框是橙色,点击字体是白色,背景 ...
- 第一次试验报告&学习总结
打印输出所有的"水仙花数",所谓"水仙花数"是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个"水仙花数". 试验代码: p ...
- AI工程师职业规划和学习路线完整版
AI工程师职业规划和学习路线完整版 如何成为一名机器学习算法工程师 成为一名合格的开发工程师不是一件简单的事情,需要掌握从开发到调试到优化等一系列能 力,这些能力中的每一项掌握起来都需要足够的努力 ...
- rtmp协议分析
最近需要做一个rtmp服务器,着手分析一下rtmp协议,开干. rtmp握手 这个推荐一篇文章讲解得比较透彻http://blog.sina.com.cn/s/blog_676e11660102v8b ...