zoukankan      html  css  js  c++  java
  • Apicloud——图片不适配屏幕解决方案

    从后台获取的数据中有HTML代码,其中的图片显示不适配手机屏幕:

     现象:

    看api解决方案:

      1 <!doctype html>
      2 <html>
      3 
      4 <head>
      5     <meta charset="utf-8">
      6     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
      7     <title>APICloud APP</title>
      8     <link rel="stylesheet" type="text/css" href="../css/api.css" />
      9     <link rel="stylesheet" type="text/css" href="../css/style.css" />
     10 </head>
     11 
     12 <body>
     13     <section class="wid_95">
     14         <div id="text_title" class="discuss_title"></div>
     15         <ul class="discuss_wrap">
     16             <li class="update_time" id="update_time"></li>
     17             <li class="clicks" id="clicks"></li>
     18         </ul>
     19         <div id="text_content" class="text_content"></div>
     20     </section>
     21     <div class="h10"></div>
     22     <div class="hot_bursting_title fon_16">评论</div>
     23     <section id="content">
     24         <div class="touxiang_w" id="user_headimg">
     25             <!-- <img src="http://xxxx.XXXXX.cn/uploads/20171229/3b8d734e0d6c3bfb6e48f2538cbee6fa.jpg" class="touxiang"/> -->
     26         </div>
     27         <ul class="wid_90 discuss_user">
     28 
     29             <li class="fram2_left" id="user_nickname">
     30                 <!-- <p>lala</p> -->
     31             </li>
     32             <li class="fram2_right">2</li>
     33         </ul>
     34         <div class=" wid_90 discuss_user1">111111111111</div>
     35 
     36     </section>
     37 
     38 
     39 </body>
     40 <script type="text/javascript" src="../script/api.js"></script>
     41 
     42 <script type="text/javascript" src="../script/carbagbag.js"></script>
     43 
     44 <script type="text/javascript" src="../script/jquery.min.js"></script>
     45 
     46 <script type="text/javascript">
     47     apiready = function() {
     48 
     49         api.ajax({
     50             url: 'http://xxxx.XXXXXX.cn/index/Carcircle/detail',
     51             method: 'post',
     52             data: {
     53                 values: {
     54                     car_circle_id: api.pageParam.wareId
     55                 },
     56             }
     57         }, function(ret, err) {
     58             if (ret) {
     59 
     60                 var text_title = ret.data.text_title;
     61                 $api.byId('text_title').innerHTML = text_title;
     62 
     63                 var update_time = ret.data.update_time;
     64 
     65 
     66                 $api.byId('update_time').innerHTML = update_time;
     67 
     68                 //评论
     69                 var clicks = ret.data.clicks;
     70                 $api.byId('clicks').innerHTML = clicks;
     71                 //内容
     72                 var text_content = ret.data.text_content;
     73                 $api.byId('text_content').innerHTML = text_content;
     74                 //获取内容中img标签,设置宽度为屏幕宽度
     75                 var el = $api.byId('text_content');
     76                 var img = $api.domAll(el, 'img');
     77                 for (var i = 0; i < img.length; i++) {
     78                   console.log(JSON.stringify(img[i]));
     79                   var winWidth = api.winWidth;
     80                   $api.attr(img[i], 'width', winWidth-20);
     81                 }
     82 
     83 
     84             } else {
     85                 alert(JSON.stringify(err));
     86             }
     87         });
     88         api.ajax({
     89             url: 'http://xxxx.XXXXX.cn/index/Carcircle/detail_comment',
     90             method: 'post',
     91             data: {
     92                 values: {
     93                     car_circle_id: api.pageParam.wareId,
     94                     page: 1
     95                 },
     96             }
     97         }, function(ret, err) {
     98             if (ret) {
     99                 //console.log(JSON.stringify($api.getStorage('nickname1')));
    100                 $api.byId('user_nickname').innerHTML = user_nickname;
    101 
    102 
    103                 //console.log(JSON.stringify(ret));
    104                 var detail_comment = ret.data;
    105                 var detail_comment_html = '';
    106 
    107 
    108                 for (var i = 0; i < detail_comment.length; i++) {
    109 
    110                     detail_comment_html +=
    111                         '<div class="wid_95 discuss_user_w"><img  class="touxiang" src="' + detail_comment[i].user_headimg + '"/>' + '<div class="discuss_user_wrap"><ul class="discuss_user"><li class="fram2_left">' + detail_comment[i].user_nickname +
    112                         '</li><li class="fram2_right">' + detail_comment[i].create_time.substring(5, 10) + '</li></ul><div class="discuss_user1">' + detail_comment[i].content + '</div></div></div>'
    113                 }
    114                 $api.byId('content').innerHTML = detail_comment_html;
    115 
    116 
    117             } else {
    118                 alert(JSON.stringify(err));
    119             }
    120         });
    121 
    122     };
    123 
    124     var user_headimg;
    125     var user_nickname;
    126 
    127     function closeWin() {
    128         api.closeWin({});
    129     };
    130 </script>
    131 
    132 </html>
  • 相关阅读:
    查看Google Cloud的IP地址段
    CentOS 7 named设置主从复制
    CentOS 7 named配置forward
    CentOS 7安装chroot Named
    neo4j CQL 使用
    neo4j图数据库安装以及基本操作命令
    运行spark官方的graphx 示例 ComprehensiveExample.scala报错解决
    hbase启动异常的慢
    使用hadoop-daemon.sh 启动bootstrapStandby nameNode异常
    hadoop2.6 上hive运行 报“native-lzo library not available”异常处理
  • 原文地址:https://www.cnblogs.com/jry199506/p/10045000.html
Copyright © 2011-2022 走看看