相关疑难解决方法(0)
防止iOS Safari中的方向更改
旋转设备时,是否可以避免在Safari for iOS中过渡到横向视图？
iOS Safari有"orentationchange"事件,我试图拦截它并禁用默认行为,如下所示:
<html>
<head>
<script type="text/javascript">
function changeOrientation(event) {
alert("Rotate");
event.preventDefault();
}
</script>
</head>
<body onorientationchange="changeOrientation(event);">
PAGE CONTENT
</body>
</html>
但是当我在iPhone上测试页面时,当我旋转设备时会显示警报,但视图会切换到横向.似乎event.preventDefault()不会停止旋转.
有没有办法阻止这种行为？
推荐指数
解决办法
查看次数
由于虚拟键盘导致的window.resize导致jquery mobile出现问题
我遇到了一个不寻常的问题,我正在寻找建议.基本上,我正在使用:
- JQuery Mobile 1.1
- JQuery 8.2
- PhoneGap(科尔多瓦)2.1
在iPhone上我的应用程序的许多页面上,如果我将光标放入输入框,则会打开虚拟键盘.这很好,期待.
这是问题所在:在某些情况下(但不是全部),将光标放入输入框会触发window.resize事件.我通过以下代码验证了这一点:
$(window).resize(function(e) {
alert('The window resize occurred! Width: ' + $(window).width() + " Height: " + $(window).height());
debugger;
return false;
});
在解析window.resize事件后,JQueryMobile立即决定将页面调整为不正确的高度.我可以告诉它是页面,因为我为每个元素添加了不同的颜色边框以查看它是什么.在许多情况下,这个调整大小的动作导致我的一半GUI在div的底部溢出,有时甚至使我的光标隐藏在div下面.
理解它的最好方法是使用屏幕截图:
现在,我真的不希望任何人对此有一个确切的答案.我只是在寻找调试技巧.我在window.resize()事件中添加了一个"调试器"语句,并尝试逐步执行代码.我希望能够引导一些旨在调整页面大小的其他调整大小的侦听器.如果我能找到它,那么当有人选择表单元素时,我可以暂时削弱它,然后重新启用模糊或方向更改的大小调整.问题是,我逐步完成了每行代码,调试过程在调整大小之前就停止了.
这让我想知道是否还有一些其他事件被从window.resize中解雇.所以我在下面添加了两行:
document.addEventListener("throttledresize", function() { alert("throttledresize fired.") }, false);
document.addEventListener("orientationchange", function() { alert("orientationchange fired.") }, false);
然而,两者都没有被解雇.所以我有点卡住了.我很清楚我知道问题是什么,但我无法追溯到源头.关于在哪里可以找到这个在window.resize()上调整页面大小的神秘代码的任何建议？
推荐指数
解决办法
查看次数
使用javascript检测方向的变化
是否可以使用javascript检测iPad或Galaxy Tab上浏览器方向的变化？我认为使用css媒体查询是可能的.
推荐指数
解决办法
查看次数
针对不同的Android屏幕尺寸/密度扩展Phonegap应用？
我有一个Phonegap应用程序,旨在在Android手机和平板电脑上运行.文字和图像的比例在手机上看起来很好,但在7英寸平板电脑上却太小了.
有没有办法设置适用于基于Phonegap的应用程序的不同屏幕尺寸/密度的比例？对于原生的Android应用程序,多个屏幕布局(如Android文档中所述)将是一个解决方案,但这可以用于基于Phonegap的应用程序吗？
我可以使用CSS媒体查询根据屏幕大小设置字体大小,但我想按比例缩放整个界面(包括图像).
我尝试使用CSS zoom属性和媒体查询来定位特定的屏幕大小,但这会破坏绝对定位并干扰UI元素的功能,例如iScroll:
@media only screen and (min-device-width : 768px) {
body{
zoom: 125%;
}
}
@media only screen and (min-device-width : 1024px){
body{
zoom: 150%;
}
}
我也尝试使用targetdensity-dpimeta视口属性 - 将其调整为120dpi使得7"平板电脑上的刻度更好,但手机上的尺寸太大了.由于这是在HTML而不是CSS中进行硬编码,因此不能使用媒体查询根据屏幕大小来改变它:
<meta name="viewport"
content="width=device-width, initial-scale=1, targetdensity-dpi=120dpi">
以下是来自测试用Phonegap应用程序的一些截图:
推荐指数
解决办法
查看次数
为风景和肖像设置不同的初始比例
我想在Ipad上为风景和肖像设置不同的初始比例
我加入了 head
<meta name="viewport" content="width=device-width, initial-scale=0.6" />
我试图使用这个脚本
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
function onOrientationChange()
{
var viewportmeta = document.querySelector('meta[name="viewport"]');
switch(window.orientation)
{
case -90:
case 90:
viewportmeta.content = 'initial-scale=0.6';
break;
default:
viewportmeta.content = 'initial-scale=0.8';
break;
}
}
window.addEventListener('orientationchange', onOrientationChange);
onOrientationChange();
但是id不正确.有什么方法可以使它工作吗？
推荐指数
解决办法
查看次数
使用react js和orientationchange事件时如何检测移动网站的屏幕方向？
我想使用所有主要移动浏览器都支持的事件来检测屏幕方向orientationchange的变化。
我添加事件侦听器componentDidMount并从事件回调内部设置状态。
但是，我发现当事件由于从纵向更改为横向而首次触发时，状态不会更新为横向。然后，当我将方向从横向更改回纵向时，状态显示方向是横向。此后，每次我更改方向时，状态总是与实际方向相反。我不确定我是否应该使用某种生命周期反应方法，或者我的检测效果不好。
我使用 Chrome 开发者工具测试了代码Toggle device toolbar。这是我的代码：
import React from 'react';
class AppInfo extends React.Component {
state = {
screenOrientation: 'portrait'
}
isPortraitMode = () => {
console.log(this.state);
const { screenOrientation } = this.state;
return screenOrientation === 'portrait';
}
setScreenOrientation = () => {
if (window.matchMedia("(orientation: portrait)").matches) {
console.log('orientation: portrait');
this.setState({
screenOrientation: 'portrait'
});
}
if (window.matchMedia("(orientation: landscape)").matches) {
console.log('orientation: landscape');
this.setState({
screenOrientation: 'landscape'
});
}
}
componentDidMount() {
window.addEventListener('orientationchange', this.setScreenOrientation); …推荐指数
解决办法
查看次数
如何使用JavaScript检测设备方向？
我已经看到了很多方法来检测设备的屏幕方向,包括使用检查来测试innerWidth和innerHeight,就像这样.
function getOrientation(){
var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Primary";
return orientation;
}
但是,如果我想检查屏幕方向的变化以及事件监听器怎么办？我试过这段代码,但它对我不起作用.
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
alert('landscape');
break;
default:
alert('portrait');
break;
}
}
window.addEventListener('orientationchange', doOnOrientationChange);
// Initial execution if needed
doOnOrientationChange();
它不会检测设备方向,并且监听器不会为我注册(我正在使用Chrome的设备模拟器).
推荐指数
解决办法
查看次数
检测设备是否能够在JavaScript中更改方向
是否存在本机JavaScript(或通过使用诸如JQuery/Modernizr等库)来检测设备是否能够改变方向？我想用它作为区分桌面和移动设备的方法.
谢谢,
沙迪
javascript jquery orientation device-orientation orientation-changes
推荐指数
解决办法
查看次数
orientationchange 事件不会在 IOS 设备上触发
Orientationchange事件不会在 iOS 设备上触发。在台式机和 Android 设备上一切正常，但操作系统设备不支持此事件。如何确定 iOS 设备上的屏幕方向变化？
推荐指数
解决办法
查看次数
使用phonegap强制iPhone上的纵向方向
我想为我的应用程序设置纵向,我试着:
AndroidManifest.xml中:
<activity ... android:screenOrientation="portrait" ... android:configChanges="orientation| ..." />
和config.xml:
<preference name="orientation" value="portrait" />
这完全适用于我的Android手机,但不适用于iPhone 4.
谢谢!
推荐指数
解决办法
查看次数
标签 统计
javascript ×5
cordova ×4
ios ×4
android ×3
css ×3
jquery ×3
dom-events ×2
ipad ×2
orientation ×2
dpi ×1
galaxy-tab ×1
html ×1
iphone ×1
jqtouch ×1
reactjs ×1
safari ×1
scale ×1