个人中心
gpt4 book ai didi

ios - ios 上的 UIWebView 不能很好地适应内容

转载 作者：太空宇宙 更新时间：2023-11-03 17:35:51 25 4
gpt4 key购买 nike

{请稍后更新英文，我不想让这个问题陷入困境}

Ios 的 webview 从 url 加载这个静态内容。

由于某种原因，它的宽度有问题。即使我将宽度设置为 100%，它也会左右滑动。我不了解 ios webview。

任何帮助都会很棒。

enter image description here

这是html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <!-- for Facebook -->
    <meta property="og:title" content="fb-title" />
    <meta property="og:type" content="https://somedomain/#/login" />
    <meta property="og:image" content="http://somedomain.com/en-us/images/WebsitePieces/homepage/A_header-vmc3030-camera-water-photo-large.png" />
    <meta property="og:url" content="https://somedomain/#/login" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script>
    window.fbAsyncInit = function() {
        FB.init({
            appId: '625280937908870606983',
            xfbml: true,
            version: 'v2.3'
        });
    };

    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>
    <!-- <button onclick="gogogo()">Share me, please 2</button> -->


    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <script>
    function gogogo() {
        FB.ui({
            method: 'feed',
            link: 'somedomain.com',
            picture: 'http://www.somedomain.com/en-us/images/WebsitePieces/homepage/social_share.png',
            name: 'somedomain',
            caption: 'Learn how easy somedomain is!',

            // description: 'Must read daily!'
        });
    }
    </script>
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//code.angularjs.org/1.2.16/angular.js"></script>
    <!-- <script src="https://somedomaindev.netgear.com/js/angulike.js"></script> -->
    <script src="angulike.js"></script>
    <!-- build:css styles/main.css -->
    <!-- endbuild -->
    <!-- build:js scripts/vendor/modernizr.js -->
    <script>
    angular.module('myApp', ['angulike'])
        .run([
            '$rootScope',
            function($rootScope) {
                $rootScope.facebookAppId = '625280937606983';
            }
        ])

    .controller('myController', [
        '$scope',
        function($scope) {
            $scope.myModel = {
                Name: "Installing somedomaincameras is a breeze. Took me less than 10 minutes because it is truely wirefree #somedomain",
                ImageUrl: 'img/B_platform.png',
                FbLikeUrl: 'http://somedomain.com'
            };
        }
    ]);
    </script>
    <style>



    @font-face {
        font-family: myFirstFont;
        src: url(styles/2BF294_D_0.woff);
    }





@font-face {
font-family: 'MorebiRounded-Regular';
    src: url('webfonts/2BF294_D_0.eot') format('embedded-opentype'); /* IE9 + later */
    src: url('webfonts/2BF294_D_0.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8  */
         url('webfonts/2BF294_D_0.woff') format('woff');     /* Newer browsers */
    src: url('webfonts/2BF294_D_0.ttf') format('truetype');  /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini  */
         url('webfonts/2BF294_D_0.eot.svg#Min_font + regular, italic, bold) format('svg'); 
}



    $icon-font-path: '../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/';
    @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
    body {
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: white !important;
    }
    /* Everything but the jumbotron gets side spacing for mobile first views */
    /* Main marketing message and sign up button */

    .jumbotron {
        text-align: center;
        padding: 0px 0px 0px 0px;
    }
    /* Supporting marketing content */

    .marketing {
        margin: 40px 0;
        p + h4 {
            margin-top: 28px;
        }
    }
    /* Responsive: Portrait tablets and up */

    @media screen and (min-width: 768px) {
        .container {
            max-width: 730px;
        }

        .header {
            margin-bottom: 30px;
        }
        /* Remove the bottom border on the jumbotron for visual effect */

        .jumbotron {
            border-bottom: 0;
            background-color: #f0f0f0 !important;
            // height:200px;
            padding: 0px 0px 0px 0px;
        }
    }



    @media screen and (min-width: 768px) {
        .green-p {
        color: red;
        font-size: 18px;
        margin-right: 26px;
        /*margin-left: 15px;*/
    }
    }

    .green-p {
        color: green;
        font-size: 18px;
        margin-right: -16px;
        margin-left: 3px;
    }

    .push-down-1 {
        background-color: #f0f0f0 !important;
        padding-top: 30px;
        padding-bottom: 0px;
        margin-left: 2px;
        margin-right: 2px;
    }

    .push-down-2 {
        background-color: #f0f0f0 !important;
        padding-top: 0px;
        padding-bottom: 10px;
        margin-left: 2px;
        margin-right: 2px;
    }

    #close {
        box-sizing: border-box;
        color: rgb(68, 68, 68);
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
        align-self: stretch;
        border: 0px none rgb(68, 68, 68);
        border-radius: 5px 5px 5px 5px;
        font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
        outline: rgb(68, 68, 68) none 0px;
    }
    /*#DIV_1*/
    /*   #close:before {
        box-sizing: border-box;
        color: rgb(187, 187, 187);
        cursor: pointer;
        display: block;
        height: 30px;
        position: absolute;
        right: 3px;
        text-align: center;
        top: 3px;
        width: 30px;
        align-self: stretch;
        perspective-origin: 15px 15px;
        transform-origin: 15px 15px;
        content: '×';
        border: 0px none rgb(187, 187, 187);
        border-radius: 3px 3px 3px 3px;
        font: normal normal normal normal 26px/26px Helvetica, Arial, sans-serif;
        outline: rgb(187, 187, 187) none 0px;
    }*/
    /*#DIV_1:before*/

    #DIV_1 {
        box-sizing: border-box;
        color: rgb(68, 68, 68);
        height: 45px;
        text-align: left;
        width: auto;
        perspective-origin: 298.508514404297px 22.5px;
        transform-origin: 298.508514404297px 22.5px;
        background: rgb(211, 211, 211) none repeat scroll 0% 0% / auto padding-box border-box;
        border-top: 0px none rgb(229, 229, 229);
        border-right: 0px none rgb(229, 229, 229);
        border-bottom: 0.909090876579285px solid rgb(229, 229, 229);
        border-left: 0px none rgb(229, 229, 229);
        border-radius: 5px 5px 0 0;
        font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
        margin: 0px 0px 0px;
        margin-left: 3px;
        margin-right: 3px;
        outline: rgb(68, 68, 68) none 0px;
    }
    /*#DIV_1*/

    #H3_2 {
        box-sizing: border-box;
        color: rgb(68, 68, 68);
        height: 36.4488639831543px;
        text-align: left;
        width: auto;
        perspective-origin: 298.508514404297px 18.2244319915772px;
        transform-origin: 298.508514404297px 18.2244319915772px;
        border: 0px none rgb(68, 68, 68);
        font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
        margin: 2px 0px 10px 0px;
        outline: rgb(68, 68, 68) none 0px;
        padding: 11px 0px 0px 33px;
        text-align: center;
    }

    .top-down {
        margin-bottom: 1px;
        /*padding-bottom: 12px;*/
    }

    #fb-icon {
        cursor: pointer;
        display: inline-block;
        height: 32px;
        position: relative;
        vertical-align: top;
        width: 32px;
        perspective-origin: 16px 16px;
        transform-origin: 16px 16px;
        background: rgba(0, 0, 0, 0) url(img2/facebook_32.png) repeat scroll 0% 0% / auto padding-box border-box;
        font: normal normal normal normal 11px/16px Helvetica, Tahoma, Arial;
    }
    /*#SPAN_1*/

    .g-plus {
        margin-top: 2px;
    }

    .fb-icon {
        margin-top: 1px;
    }

    #SPAN_1 {
        cursor: pointer;
        display: inline-block;
        height: 28px;
        position: relative;
        text-align: center;
        white-space: nowrap;
        width: 60px;
        perspective-origin: 30px 11px;
        transform-origin: 30px 11px;
        background: rgba(0, 0, 0, 0) url(img2/fb-share.png) no-repeat scroll 0% 0% / auto padding-box border-box;
        font: normal normal normal normal 11px/16px Verdana, Helvetica, sans-serif;
        padding: 3px 0px;
    }
    /*#SPAN_1*/


        #logo { background: url(; background-repeat: none; width: 236px;
            height: 169px;
         }




/* iphone5 */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

    .green-p {
            color: green;
            font-size: 12px;
            margin-right: -16px;
            margin-left: 3px;
        }
         #H3_2{
            width:auto;
            font-size:10px;
            font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
        }


      #logo { background: url(i); background-repeat: none; width: 150px;
        height: 90px;
        margin-right: 20px;
     }
     .jumbotron{
           padding: 0px 0px 0px 0px;
     }

      .push-down-1{
            background-color: #f0f0f0 !important;
            padding-top: 30px;
            padding-bottom: 10px;
            margin-left: 2px;
            margin-right: 2px;
     }


         .push-down-2 {
            background-color: #f0f0f0 !important;
            padding-top: 0px;
            padding-bottom: 9px;
            margin-left: 2px;
            margin-right: 2px;
        }
}


/*iphone6*/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {
        .green-p {
                color: green;
                font-size: 12px;
                margin-right: 0px;
                margin-left: 15px;
            }
             #H3_2{
                width:auto;
                font-size:10px;
            }


          #logo { background: url(img2/cam.png); background-repeat: none; width: 169px;
            height: 90px;
            margin-right: 20px;
         }
         .jumbotron{
            padding-top:0px;
         }
         .push-down-1{
                background-color: #f0f0f0 !important;
                padding-top: 30px;
                padding-bottom: 10px;
                margin-left: 2px;
                margin-right: 2px;
         }

        .push-down-2 {
                background-color: #f0f0f0 !important;
                padding-top: 0px;
                padding-bottom: 30px;
                margin-left: 2px;
                margin-right: 2px;
            }
}







    </style>
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="css/ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="css/ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>

<body>
    <div class="jumbotron top-down">
        <div id="close">
        </div>
        <div id="DIV_1">
            <h3 id="H3_2">
                            hello I'm dialog header
                  </h3>
        </div>
        <div class="row push-down-1">
            <div class="col-xs-6">
                <!-- <img src="img2/camera_hand.png"> -->
                <div id="logo"> </div>

            </div>
            <div class="col-xs-6">
                <div class="row green-p">
             some text here              some text here              some text here              some text here              some text here              some text here              some text here              some text here              some text here              some text here 
                </div>
            </div>
        </div>
        <div ng-controller="myController" class="text-center push-down-2 row">
                <div class="col-xs-4 fb-icon">
                    <span onclick="gogogo()" id="SPAN_1"></span>
                </div>
                <div class="col-xs-4">
                    <div tweet="myModel.Name"></div>
                </div>
                <div class="col-xs-4 g-plus">
                    <div google-plus></div>
                </div>
        </div>
        <!-- </div> -->
    </div>
    <!-- jumbotron -->
    <!-- container -->
</body>

</html>

最佳答案

WebView 有一个属性 -- 将 scalesPageToFit 设置为 TRUE。

关于ios - ios 上的 UIWebView 不能很好地适应内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29785367/

25 4 0
文章推荐： ruby - 如何将字符串拆分为单独的组件以解析为 DateTime？
文章推荐： c# - 从对象列表返回属性列表
文章推荐： python - 正确凭证的 Cntlm 代理身份验证问题
文章推荐： ruby-on-rails - 为什么我们甚至需要在 `new` 方法中创建一个新的实例 obj？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com