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>
原文地址:https://www.cnblogs.com/jry199506/p/10045000.html