小编Jov*_*ove的帖子

Chrome v23不支持视口比例或视口元标记？

我制作了一个HTML5 Webapp,我希望它可以通过PC(非移动设备)的窗口大小自动缩放.所以我在css中添加它:

@-ms-viewport { width: 1024px; }
@-webkit-viewport { width: 1024px; }
@-moz-viewport { width: 1024px; }
@-o-viewport { width: 1024px; }
@viewport { width: 1024px; }

Run Code Online (Sandbox Code Playgroud)

在IE10(Win8)中,没关系,如果窗口调整得更小,html中的所有内容都会更小.html缩小了.

但在Chrome v23中,如果窗口调整得更小,html中的所有内容都不会缩放.Chrome v23不支持视口比例？

在此输入图像描述

javascript html5 google-chrome viewport css3

Jov*_*ove

2013 01-04

7
推荐指数

1
解决办法

1602
查看次数

在iOS上滚动iframe已解决,但iframe页面显示不完整

我试图在iOS上滚动iframe,我成功了,它滚动得很好,参考:

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/nicescroll/demo.html

但是,所有解决方案都存在问题:iframe页面未完全显示...

我在我的iphone和ipad上测试过,iframe页面显示不稳定. 在此输入图像描述

任何的想法？

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
    <script type="text/javascript">
    $(function(){
        if (/iPhone|iPod|iPad/.test(navigator.userAgent))
            $('iframe').wrap(function(){
                var $this = $(this);
                return $('<div />').css({
                    width: $this.attr('width'),
                    height: $this.attr('height'),
                    overflow: 'scroll',
                    '-webkit-overflow-scrolling': 'touch'
                });
            });
    })
    </script>
    <title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

iframe html5 web-applications jquery-plugins cordova

Jov*_*ove

2014 08-19

7
推荐指数

2
解决办法

4万
查看次数