有没有办法在手机上用CSS或jQuery控制窗口高度？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

跨平台移动APP开发进阶(二)：HTML5+、mui开发移动app教程

mobileweb 的文件存放在web 服务器上，而移动App 的文件存放在手机本地，编写移动App 的html、js、css文件被打包到ipa或apk等原生安装包，在手机客户端运行。...缺陷：毕竟不是app，不管怎样也没办法取代app的便捷和功能强大。...jquery mobile:专门对移动端做定制，看起来就像手机应用一样，js+css，国外的，不推荐，有坑。... 调试（android为例）连接手机首先需要连接手机运行选择运行——手机运行——在xx设备上运行或者使用快捷键ctrl+r 效果现在你就可以在手机上看效果了...html 2.子页面适用于侧滑菜单子页面有其特点，特别适用与index.html+list.html这种情况，如果用index.html(主页面)+list.html(子页面)实现的话，当主页面右滑时子页面会自动跟随

5.9K2 1

手机响应式网站设计_如何做响应式网页设计

这个问题困扰了我好久，在PC上我们惯用的px单位在手机上根本不适用，即使我们写了用百分比布局。宽度自适应做到了但是高度呢，高度也用百分比吗？难道把元素的高度写死吗。这种做法就是jquery mobile页面的做法了，大屏手机显示效果不好看。用Bootstrap做栅格化。...那有什么好的办法呢？灵活的em与灵活可控的rem em是相对单位，相对于父级的字号。这里的父级其实指的是祖先级，一直往上哪里定义了字号就相对它，直到根节点html。...有没有更智能的方式？为什么每次都要通过小工具去换算单位呢，有没有办法让单位自动换算的？直接用css当然是行不通的，虽然它有calc()这个属性，但是兼容性不强。...我们配合CSS预编译来做呢，less、sass、stylus，不是可以让css有运算能力吗。之后我发现了百度EFE团队开发的基于less的est框架里面就包含了这功能。

2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

让div等块级元素水平以及垂直居中的解决办法

一、背景　　我们在设计页面的时候，经常要把div等块级元素居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让div等块级元素居中。...二、解决办法 1.CSS让div等块级元素水平居中　原理：让一个div等块级元素水平居中，直接用CSS就可以做到。...实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%...等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。...，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。

2.9K2 0

解决移动端手机浏览器软键盘遮挡输入框问题

在手机端经常有这样的需求 , 最下面是输入框类似微信输入框 , 我们一般设置成了position:fixed 但是当点击到输入框的时候, 软键盘弹出来遮挡了输入框其实解决这个问题非常简单 , 那就是让...body滚动到最底部 , 我们给个滚动最大值就可以了例如下面的jquery: $(window).resize(function(){...$(window).resize(function(){ var docheight = $(window).height(); /*唤起键盘时当前窗口高度*/ console.log(docheight...this.scrollBottom(); $('body').scrollTop(99999999); // if(docheight 高度小于未唤起键盘高度时执行...css("position","fixed"); // } });

1.9K2 0

浅谈移动端中的视口（viewport）

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。...1.2 三种视口移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。...布局视口（layout viewport）一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题...iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?...定义视口的宽度，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale

3K2 0

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统（第二节）

banner 可以是网站页面的横幅广告，也可以是游行活动时用的旗帜，还可以是报纸杂志上的大标题。Banner 主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。...如果你全部用div，就达不到这个效果了。我们给每一张图片加一个高度和宽度。...你有没有发现，float，margin这些css样式用得特别频繁呢？是的，其实我们的css样式表中，充斥着很多这样的重复代码，那么有没有什么办法可以改善这种情况呢？...transition: all ease 0.6s; 这句话的意思就是说，所有的css属性如果发生变化，我们就平和地（ease），用0.6秒的时间来变过去。....banner .content ul{ width: 10000px; margin-left: -1024px; } 看起来图片有些太宽了呢，恩，那好吧，我把图片的高度和父容器的高度都调大一些

1.8K7 0

BootStrap 前端框架简介

伸缩布局决定的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充伸缩容器额外的空间，这可以用flex属性来完成。...width Length Yes 渲染界面的宽度 height Length Yes 渲染界面的高度 Orientation Portrait/landscape No 横屏或竖屏 Resolution...网页在手机上的比平板上要小，比pc上要小，之前都是针对的是pc设计，现在要考虑到平板，手机，手表，固定的网页无法适应不同的硬件设备。这时候就要对网页进行等比例的缩放，以适应屏幕。...jQuery 插件，能够让你快速地开发出产品原型或构建整个 app。...2.1 引入文件 bootStrap.min.css jquery.min.js bootStrap.min.js 2.2 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口

5K1 0

jQuery Builder：jQuery 库的精简之道

但众所周知Jquery 库是日渐臃肿，就最新的版本，min版本（压缩版）就有90多kb，在手机上是不能承受的痛啊。于是思考着对jQuery库进行精简压缩。...虽然没有系统学习Jquery，但旁门左道那么久了也大概知道Jquery 就是模块化“定制”的，因此要说精简压缩、按需使用还是有戏的。循着这个思路，最终找到了这个jQuery Builder。...jQuery 是模块化组成，一个小项目里面不大可能全用上这些模块（比如我那个手机主题，就ajax、css、effect 大概就这么几个模块需要），那么该去掉不需要的，重新打包生成自己的私人定制jQuery...用法：打开http://projects.jga.me/jquery-builder/，选择需要的jQuery 版本（最好勾选minify），然后选择需要的模块，点击 “build” 按钮，生成的窗口地址下载过来...那只能一个个做减法尝试了（哈哈，我也是这么干的）一般来说，build后的jquery 库体积都有所减少，特别你本身用的功能也不多的时候，像Jeff 的手机主题最终用到了50kb左右——减少了快一半。

2.1K7 0

jQuery.dotdotdot多行文本省略号插件的使用方法

最近在做一个自适应的网站，经常遇到需要文本的溢出地方，我写了一个CSS简单设置文本溢出的方法：用css实现文本溢出div显示省略号但是IE只能设置单行溢出隐藏，Webkit内核浏览器才支持多行溢出，于是找到了这款插件...: null: 判断CSS (max-)的高度; number: 设置一个固定的高度; "watch": 重新判断“watch...”中的CSS (max-)的高度; */ keep: null, /* jQuery选择器的元素保存在省略号之后. */ tolerance...*/ API.watch(); /* 开始监视包装器或窗口的宽度和高度。 ...*/ API.unwatch(); /* 停止监视包装器或窗口的宽度和高度。 */ }) 简单的页面演示代码： <!

2.9K0 1

01_移动端布局基础

移动端页面的所有交互活动由鼠标控制变为手指触屏控制，操作方式更加丰富，如摇一摇、双指放大、滑动、双击、单击等。...如果不分开做两套，而是直接用响应式的话，那么 pc 端上显示的很多页面布局就要在手机端上隐藏，结果这些页面都没有被用到，但是却加载了。...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...device-width height 设置视口高度，可以设为正整数（像素）或特殊值 device-height initial-scale 初始缩放比，取值范围为 0.0~10.0 maximum-scale...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。

1.1K1 0

前端学习资料整理

6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型 7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们 8、浮动元素 ——怎么使用它们、它们有什么问题以及怎么解决这些问题...需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果用纯CSS创建一个三角形的原理是什么？...alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body...).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border...解决办法，可以设置浮动，不想浮动的话在ul用font-size:0去掉空白，像chrome不支持font-size:0的用letter-spacing:-3px这样的方式去掉li间的空白。

4.2K2 0

HTML5响应式布局

可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。...Meta标签定义使用viewport meta标签在手机上控制布局用点字法触觉回馈设备； bossed 盲文打印机； ojection 各种投影设备； tty 使用固定密度字母栅格的媒介，比如电传打字机和终端。...设备特性 width 浏览器宽度； height 浏览器高度； device-width 设备屏幕分辨率的宽度值； device-height 设备屏幕分辨率的高度值； orientation 浏览器窗口的方向纵向还是横向...，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape； aspect-ratio 比例值，浏览器的纵横比； device-aspect-ratio 比例值，屏幕的纵横比。

3.2K1 0

对HTML-input的一些思考和理解

这种方法在PC端简直完美，但在一些手机上需要【点击两次】才有效 —— 猜测可能还是移动端响应click的问题。...willValidate：元素约束是否“被符合”，无则返回false validity：当前元素验证状态 validationMessage：描述相关约束失败 / 错误信息 checkValidity()：有没有满足任一约束...几乎不用想，在手机上一定会出现一些“似乎莫名其妙的问题”：比较推荐的是，用div+absolute来重新写一个“小叉号”，用JS控制对应事件。 ★这里“比较推荐”是“在解决问题的办法”中比较而得。...（就很尴尬）更尴尬的是：max只能控制“上限值” —— 比如只能输入5位，则写为：max="99999" ，而且他的效果还是体现到“获取到的值”上。...★input的高度可以用height或者padding来改变 —— 事实上，几乎所有的行内（非替换）元素都是用padding改变高度的（行内替换元素可以设置height） ” ---- 其实说了这么多，

9543 0

移动端viewport属性说明笔记

通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念像素是计算机屏幕中显示特定颜色的最小区域。...根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。...iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?...# 视觉视口(visual viewport) 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...定义视口的宽度，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值，即当页面第一次 load

1.9K2 0

第一个.NET小程序

1.登录界面因为需要在手机上面显示，本人又是啥都不会，于是百度到了这样的一句话窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），...height：和 width 相对应，指定高度。initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。maximum-scale：允许用户缩放到的最大比例。...可以理解 “width=device-width”的作用就是把viewport的宽度变成了设备的宽度，无论竖屏还是横屏都一样,回头看下为什么我们在手机上打开一个正常的pc端网站，在没有手动缩放的情况下，...不会CSS所以界面有点丑，不过内部使用，只要功能实现即可。 ?

1.2K2 0

每个程序员都会的 35 个 jQuery 小技巧

input.blur( function(){ if( $.trim(input.val()) == '' ){ input.val(originalvalue); } }); } 在新窗口中打开链接...>Red Theme css>Blue Theme }); 列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。...$(document).ready(function() { equalHeight($(".left")); equalHeight($(".right")); }); }); 动态控制页面字体大小...自动修改破损图像如果你碰巧在你的网站上发现了破碎的图像链接，你可以用一个不易被替换的图像来代替它们。...有时你需要让两个 div 高度相同，而不管它们里面的内容多少。

5.3K1 0

h5页面在浏览器上好好的，到手机上熄火了又看不到报错信息怎么办？

这可把我急坏了，不知道有没有小伙伴有和我一样的困扰，我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log...作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？...双手附上在线体验地址：请在手机上打开链接：http://liriliri.github.io/eruda/index.html?...该面板还内置了一些快捷指令来快速执行一些有用的功能，比如在页面载入jQuery或underscore，使用正则表达式过滤log等。...Snippets面板 Console面板可以执行js脚本，但在手机上输入代码体验实在不怎么样。利用该面板你可以添加一些方法以便于快速和多次触发它。

1.5K2 0

前端工程师之移动端布局基础

移动端页面的所有交互活动由鼠标控制变为手指触屏控制，操作方式更加丰富，如摇一摇、双指放大、滑动、双击、单击等。...如果不分开做两套，而是直接用响应式的话，那么 pc 端上显示的很多页面布局就要在手机端上隐藏，结果这些页面都没有被用到，但是却加载了。...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...device-width height 设置视口高度，可以设为正整数（像素）或特殊值 device-height initial-scale 初始缩放比，取值范围为 0.0~10.0 maximum-scale...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。

8021 0

调整合适的画布尺寸（游戏）

/build/jquery.min.js"> <div...initalHeight = $("#game").attr("height"); var handleResize = function(){ //获得窗口宽度和高度...你希望画布的大小调整成占据整个页面，解决这一问题，可以简单的把容器元素的高度设置成一个比没有没有地址栏情况下的最终高度还要大得已知值，然后滚动窗口，来重新计算 innerHeight。 jquery.min.js"> <div...('ontouchstart' in document); var handleResize = function(){ //获得窗口宽度和高度

1.6K3 0

安卓微信页面的调试

如果是HTTPS，就先在手机上安装Fiddler的证书，在手机浏览器中访问IP:port 然后按照提示进行安装 4....在手机的Wi-Fi连接上设置代理，设置成 IP:port 不同手机修改方式不一样，但也类似，一般在更多或者高级修改网络里头这样一来，就可以在手机上直接用域名进行访问页面了。...允许USB调试，在电脑控制面板设备管理上看到设备驱动安装成功（可以直接使用刷机精灵来帮助安装驱动）然后在Chrome中访问 chrome://inspect/#devices ，在手机上访问某个页面...不过，似乎都是在PC上操作的，那有没有能直接在手机上用的工具呢？...使用真机模拟测试浏览器的设备模拟多是从样式上来模拟，安卓模拟器有了一些硬件上的倾向性，在真机上最为可靠然而现在大多数的手机浏览器都自带了工具栏，而华为手机上自带了虚拟键盘，导致一个页面的高度不统一

4.7K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭