- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在开发一个响应式网站,使用 CSS @media
标签和 jQuery 的 on(resize)
功能。
主网页的容器在 CSS 文件中设置为宽度和高度为 100vw
和 100vh
, 分别。
使用 jQuery,我可以调整网站上显示的元素的大小。
除了手机上的浏览器(例如在 Android 上运行的 Google Chrome、iOS Safari、Android 浏览器等)之外,响应式设计实现工作正常。
移动网络浏览器通常会显示地址栏,向下滚动时会隐藏地址栏。再次向上滚动时,它们会再次显示。
这种效果会不断调整我的网页大小,因为容器的大小会根据视口(viewport)的高度进行调整,本地址栏显示时视口(viewport)变小,地址栏隐藏时变大,我不这样做不希望发生这种情况。
理想的解决方案可能是忽略地址栏,这样浏览器就不会改变视口(viewport)大小,我认为传统的 js
不可能做到这一点。代码。
另一种选择可能包括避免每次地址栏显示和隐藏时都执行调整大小方法。也就是说,页面应该在调整大小时更改其容器的高度,但在显示和隐藏地址栏时不会。
<我已经尝试这样做了,但是,我无法开发这两个选项中的任何一个(在第二种情况下,我无法弄清楚如何同时实现这两个条件.. .)
有什么办法可以实现吗?
http://jsfiddle.net/kouk/emo7amuh/
<div class="container" id="first"> </div>
<div class="container" id="second"> </div>
<div class="container" id="third"> </div>
<div class="container" id="fourth"> </div>
<div class="container" id="fifth"> </div>
div.container {
height: 100vh;
width: 100vw;
}
div.container:nth-child(2n+1) {
background-color: crimson;
}
div.container:nth-child(2n) {
background-color: turquoise;
}
/* This function blocks size-change on resize (it only works on reload) */
$(document).ready(function ($) {
function constantHeight() {
$("div.content_container").height($(window).height() + 60);
}
constantHeight();
});
最佳答案
我既不是专家也不是真正的程序员,但当我找到您的帖子时我遇到了同样的问题,您在评论中放置的链接帮助我找到了适合我的解决方法。
我不会发布真正的代码,因为太乱了,但是,我所做的基本上是这样的:
我有一个使用 jquery 将我的网站大小更改为实际屏幕的功能,我使用来自 http://detectmobilebrowsers.com/ 的功能在其上添加了一些小条件。 .
if (mobilecheck==true) {pageHeight=pageHeight+60;}
在我的代码中,我有检查网站是否显示在桌面上的功能,所以它会在任何屏幕尺寸变化时调用我的 changeSize() ,或者如果在移动设备上它有一些屏幕变化但只有当宽度屏幕也发生了变化:
var oldWidth;
$(window).resize(function() {
if (mobilecheck==false || window.innerWidth!=oldWidth) {
changeSize(window.innerWidth,window.innerHeight);
}
oldWidth = window.innerWidth;
}
所以这样一来,本地址栏隐藏时屏幕会发生变化,但不会触发设计更改,只有方向发生变化时才会发生变化,因为宽度会发生变化!希望我能提供帮助,因为我也在竭尽全力解决一些移动设计问题。干杯。
关于android - 手机CSS - 地址栏调整屏幕大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32681338/
在德国,移动运营商通常会提供一种简单的方法来配置您的手机的 MMS 和 GPRS:在运营商的网站上输入您的电话号码和设备型号后,您会收到一条发送给您的“配置短信”。 我试图从技术角度理解它是如何工作的
我正在开发一个非常复杂的应用程序。它针对手机和平板电脑有不同的布局,我不知道最好的方法。 我听说您可以发布两个不同的应用程序,一个用于移动设备,另一个用于平板电脑,但人们不推荐它。 我应该用两个不同的
我不确定这个问题属于这里....但仍然.... 我的应用程序每 3 分钟与服务器交换一次数据。我在手机覆盖范围内使用蜂窝平板电脑(不是 Wi-Fi)。如果一个人在没有手机覆盖的地方使用它,他将不会获得
我有这样的 CSS: .editTable-body { width: 100%; height:140px; margin-top: 20px; overflow:
我有这个链接,它在移动设备上被设计为按钮,我面临的问题是它在手机和平板电脑上看起来不同。这是因为设备分辨率还是我应该通过 CSS 修复的问题。这是我当前的 CSS CSS border-radiu
大家好,我一个月前开始学习网络开发,但我遇到了背景图片无法在移动设备上正确显示的问题。 我正在使用下面的模板,甚至这个模板也有同样的问题。 问题只是背景图像在移动设备上放大,而不是相应地与屏幕尺寸成比
我一直在尝试为我的网站制作一个导航栏,但是当我移动它时,我导航栏中的列表移动了 40 像素到计算机屏幕的右侧,那里没有任何东西。 你能帮帮我吗? 最佳答案 在您的导航栏样式中,将导航栏的宽度设置为 1
一周以来,我一直不明白为什么我的网站被设计成响应式的,一切正常吗?笔记本电脑即使放在小尺寸的情况下也能完美运行,然后进入我的手机却没有响应。 我试过卸载插件,我更改了主题,但找不到原因。 你能抱住我吗
我在 my website 上实现了以下字体. /* Vivaldi Font */ @font-face { font-family: 'vivaldi'; src: url('as
我正在使用 Angular 4 并构建一个应用程序。它工作正常,但当我在移动设备上运行时出现问题。整个风格发生了变化并分发了整个应用程序。我担心我必须做什么。任何帮助将不胜感激 最佳答案 在表格前取
我目前使用的是 HTC Wildfire 手机的接近传感器。问题在于,如果传感器前方 1 厘米范围内有物体,它只会返回一个 bool 值。 所以,我想问一下市场上是否有一款 Android 手机具有接
根据 this Android C2DM 通过心跳机制使套接字保持 Activity 状态,使其能够接收推送消息。这让我希望我可以通过活跃的 wifi 连接向休眠手机发送消息。 我已经将“delay_
我不希望小型设备的边缘有任何空白。当屏幕已经很小时,使用除屏幕全宽之外的任何东西都会适得其反。 所以我通过wordpress使用了一个主题,但我想出了容器div并且能够修改它,我想让它更窄。 我还声明
有谁知道这些设备之一是否连接到网络,是否可以从 header 或其他方式读取其电话号码? 最佳答案 电话号码不会出现在 HTTP header 中。您的 IP 地址将对网络服务器可见,仅此而已。 编辑
我在使用以下步骤在 android 设备上设置设备所有者时遇到错误。这过去在其他设备上也有效: 执行恢复出厂设置 在设备上启用 Debug模式 从命令行在连接的设备上运行以下命令: adb insta
有人尝试在 Windows Phone 7.1 (RC) 上使用 Udp 单播吗?我有几个问题想问你们。 根据文件http://msdn.microsoft.com/en-us/library/sys
我正在制作一个游戏(仅使用 eclipse 和 android sdk),并且我有一个基于文本文件输入的关卡构建功能。 例如,“levelone.txt”可能包含“[2,5],[14,7],[10,9
我听说要测试 Android 应用程序,您必须在 2 部不同的手机上进行测试(取决于分辨率)推荐哪些手机? 最佳答案 我还建议在一台配备“纯”Android 的设备上进行测试,并且至少在另一台配备 H
我正在使用蓝牙设备手动连接 Android 手机,没有问题。但我的问题是当我启动 Activity 或应用程序时如何自动连接。 我正在引用示例 API 中的蓝牙聊天进行连接。 http://devel
我知道我可以使用 uri 在页面之间传递值,例如: NavigationService.Navigate( new Uri("/DestinationPage.xaml?parameter1=v1",
我是一名优秀的程序员,十分优秀!