Question

当方向改变时，我需要有关响应式图像的帮助。当移动设备更改为横向模式时，在图像后面的页面包装器中显示空白区域，在图像和固定页脚之间创建空间。单击按钮面板图像修复时。 HTML：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
        <link href="css/normalize.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="css/app-theme.min.css" />
        <link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
        <link rel="stylesheet" href="css/index.css" />
        <title>Elephant</title>
    </head>
    <body> 
        <div class="app">
            <div data-role="page" id="pageone" data-title="Elephant" data-url="pageone">
                <!--Menu Panel-->
                <div id="menu-panel" data-role="panel" data-position="left" data-display="push" data-position-fixed="true">
                    <ul id="page-menu" data-role="listview">
                        <li data-icon="search"><a data-rel="close" href="#pageone">Search</a></li>
                        <li data-icon="cloud"><a data-rel="close" href="#pageone">Weather</a></li>
                        <li id="location-btn" data-icon="location"><a data-rel="close"
                            href="#pageone">Location</a></li>
                        <li data-icon="camera"><a data-rel="close" href="#pageone">Camera</a></li>
                        <li data-icon="gear"><a data-rel="close" href="#pageone">Configuration</a></li>
                    </ul>
                </div>
                <!--/ Menu Panel-->
                <!--Actions Panel-->
                <div id="overlay-panel" data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true">
                    <ul id="page-menu" data-role="listview">
                        <li id="camera-btn" data-icon="camera"><a data-rel="close" href="#pageone">Photo</a></li>
                        <li data-icon="video"><a data-rel="close" href="#pageone">Video</a></li>
                        <li data-icon="audio"><a data-rel="close" href="#pageone">Audio</a></li>
                        <li data-icon="alert"><a data-rel="close" href="#pageone">File</a></li>
                    </ul>
                </div>
                <!--/Actions Panel-->
                <header id="page-header" data-role="header" data-position="fixed">
                    <a id="menu-btn" href="#menu-panel" data-role="button"
                        data-rel="close" data-icon="bars" data-iconpos="notext">Menu</a>
                    <h1>
                    <div id="spinner" class="visually-hidden ui-loader"></div>
                    <span class="visually-hidden">Elephant</span>
                    </h1>
                    <a href="#overlay-panel" data-role="button" class="ui-btn-right"
                        data-icon="bullets" data-iconpos="notext">Media</a>
                </header>
                <div id="main-content" role="main" class="ui-content">
                <div class="ui-grid-solo">
                    <div id="photos-container" class="ui-block-a">
                        <img style="display: block;" id="smallImage" src="img/test.jpeg" />
<!--                        <img style="display: none;" id="largeImage" src="" /> -->
                    </div>
                </div>
                </div>
                <footer id="page-footer" role="contentinfo" data-role="footer" data-position="fixed">
                    <h1></h1>
                </footer>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.mobile.min.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

的CSS：

#photos-container {
    width: 90%;
    margin-left: 5%;
}

#photos-container  img {
    max-width: 100%;
}

非常感谢你此致

Answer 1

感谢您的关注。计算最小高度时出错。我修好了写作：

@media screen and (orientation: landscape) {
    .ui-mobile .ui-page {
        min-height: 0 !important;
    }
}

此致

jquery移动响应图像

1 个答案: