0
私はjavascript開発者ではありませんが、デバッグ用のコードがいくつか用意されています。私と一緒に抱きしめてください。基本的には、私が取り組んでいるiOSモジュールの中に.js CSSファイルがあります。イメージが現在正しく読み込まれていないため、水平スクロールが必要になります。イメージをフォーマットするjavascript関数で改行を作成する
ここに私のコードです。スタイルが表示のためにブロックされるように設定されていますが、目的の出力が得られていないことがわかります。
function resizeImages(container, maxWidth) {
var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = images[i];
var width = parseInt(window.getComputedStyle(img, null).getPropertyValue('width'));
var height = parseInt(window.getComputedStyle(img, null).getPropertyValue('height'));
if (width > maxWidth) {
var ratio = maxWidth/width;
img.style.width = (maxWidth - 30) + "px";
// Some image heights are set to 'auto' so they do not need their height set
if (height != 0) {
img.style.height = parseInt(height * ratio) + "px";
}
}
img.style.display = "block";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
}
}
この機能でレイアウトを設定することはできますか、別の方法を見つける必要がありますか？
は*************呼び出しで返されたHTMLをプリントアウトし、ここで何私ができる
する<link rel="stylesheet" href="/7.0.2.0/styles/jive-base.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive-content.css" type="text/css" media="all" />
<style>
/* Improve default page styles for mobile */
body { background-color: #FFFFFF; min-width: 100px; padding-top: 20px; padding-left: 10px; padding-right: 10px;}
p {width: 98%; }
div.jive-rendered-content { width: 98%; }
.jive-rendered-content img.jive-image { margin: 5px; }
/* Remove link icons from inline links */
.jive-link-profile-small, .jive-link-socialgroup-small, .jive-link-community-small, .jive-link-blog-small, .jive-link-video-small, .jive-link-external-small:after, .jive-link-external-small, .jive-link-wiki-small { background-image: none; }
/* Remove underline from links after they're activated */
a:hover, a:active, a:focus { text-decoration: none; }
/* Hide unsupported Flash video content */
.jive-video-view, .jive-content-video { display: none; }
</style>
を追加任意のヘルプ
EDITいただき、ありがとうございますHTML私はこれが醜いことを知っていますが、私は肉を残しながらそれをきれいにしようとしました。謝罪いたします。
<body><link rel="stylesheet" href="/7.0.2.0/styles/jive-base.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive-content.css" type="text/css" media="all" />
<style>
/* Improve default page styles for mobile */
body { background-color: #FFFFFF; min-width: 100px; padding-top: 20px; padding-left: 10px; padding-right: 10px;}
p {width: 98%; }
div.jive-rendered-content { width: 98%; }
.jive-rendered-content img.jive-image { margin: 5px; }
/* Remove link icons from inline links */
.jive-link-profile-small, .jive-link-socialgroup-small, .jive-link-community-small, .jive-link-blog-small, .jive-link-video-small, .jive-link-external-small:after, .jive-link-external-small, .jive-link-wiki-small { background-image: none; }
/* Remove underline from links after they're activated */
a:hover, a:active, a:focus { text-decoration: none; }
/* Hide unsupported Flash video content */
.jive-video-view, .jive-content-video { display: none; }
</style><!-- [DocumentBodyStart:e313f4cb-be82-4ce9-9325-7ec5d2d25b49] --><div class="jive-rendered-content"><p><p style="min-height: 8pt; padding: 0px;"> </p><table border="0px" class="jiveBorder" jive-data-cell="{"color":"#3D3D3D","textAlign":"center","padding":"2","backgroundColor":"transparent","fontFamily":"Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif","verticalAlign":"baseline"}" jive-data-header="{"color":"#505050","backgroundColor":"#F2F2F2","textAlign":"left","padding":"6"}" style="border: 0px solid #c6c6c6; width: 100%;"><tbody><tr><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: top;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522497/13672161_10157144798120367_1344748601_n.jpg"><img alt="13672161_10157144798120367_1344748601_n.jpg" class="image-1 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522497/13672161_10157144798120367_1344748601_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: top;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522498/13689395_10157144799275367_1573986411_n.jpg"><img alt="13689395_10157144799275367_1573986411_n.jpg" class="image-2 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522498/13689395_10157144799275367_1573986411_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: top;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522499/13706333_10157144800985367_1742170785_n.jpg"><img alt="13706333_10157144800985367_1742170785_n.jpg" class="image-3 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522499/13706333_10157144800985367_1742170785_n.jpg" style="height: auto;" width="275"/></a></td></tr></tbody></table><p style="min-height: 8pt; padding: 0px;"> </p><table border="0px" class="jiveBorder" jive-data-cell="{"color":"#3D3D3D","textAlign":"center","padding":"2","backgroundColor":"transparent","fontFamily":"Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif","verticalAlign":"baseline"}" jive-data-header="{"color":"#505050","backgroundColor":"#F2F2F2","textAlign":"left","padding":"6"}" style="border: 0px solid #c6c6c6; width: 100%;"><tbody><tr><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522500/13705113_10157144798165367_204528607_n.jpg"><img alt="13705113_10157144798165367_204528607_n.jpg" class="image-4 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522500/13705113_10157144798165367_204528607_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522501/13714428_10157148347660367_1956053232_n.jpg"><img alt="13714428_10157148347660367_1956053232_n.jpg" class="image-5 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522501/13714428_10157148347660367_1956053232_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522502/13689832_10157144798095367_1657929227_n.jpg"><img alt="13689832_10157144798095367_1657929227_n.jpg" class="image-6 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522502/13689832_10157144798095367_1657929227_n.jpg" style="height: auto;" width="275"/></a></td></tr></tbody></table><p style="min-height: 8pt; padding: 0px;"> </p><table border="0px" class="jiveBorder" jive-data-cell="{"color":"#3D3D3D","textAlign":"center","padding":"2","backgroundColor":"transparent","fontFamily":"Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif","verticalAlign":"baseline"}" jive-data-header="{"color":"#505050","backgroundColor":"#F2F2F2","textAlign":"left","padding":"6"}" style="border: 0px solid #c6c6c6; width: 100%;"><tbody><tr><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522503/13689795_10157148347775367_1926959939_n.jpg"><img alt="13689795_10157148347775367_1926959939_n.jpg" class="image-7 jive-image" height="400" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522503/13689795_10157148347775367_1926959939_n.jpg" style="height: auto;" width="300"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522504/13713516_10157148347865367_1911484589_n.jpg"><img alt="13713516_10157148347865367_1911484589_n.jpg" class="image-8 jive-image" height="400" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522504/13713516_10157148347865367_1911484589_n.jpg" style="height: auto;" width="300"/></a></td></tr></tbody></table></div><!-- [DocumentBodyEnd:e313f4cb-be82-4ce9-9325-7ec5d2d25b49] --><script type="text/javascript">
function formatBlogContent() {
var container = document.querySelector('body');
var maxWidth = document.body.clientWidth - 30;
// Size images to screen
resizeImages(container, maxWidth);
// Remove left/right padding
var items = container.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
var item = items[i];
// Set the font size
item.style.fontSize = "11pt";
// Remove indentation
var paddingLeftString = window.getComputedStyle(item, null).getPropertyValue('padding-left');
var paddingLeftInt = parseInt(paddingLeftString);
var paddingRightString = window.getComputedStyle(item, null).getPropertyValue('padding-right');
var paddingRightInt = parseInt(paddingRightString);
if (paddingLeftInt > 0 || paddingRightInt > 0) {
item.style.paddingLeft = "0px";
item.style.paddingRight = "0px";
item.style.width = maxWidth - 50 + "px";
item.style.marginLeft = "auto";
item.style.marginRight = "auto";
// Resize adjusted block level images
resizeImages(item, (maxWidth - 65));
}
}
// Remove tables that are larger than the content space
var tables = container.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++) {
var table = tables[i];
var tableWidth = window.getComputedStyle(item, null).getPropertyValue('width');
// alert("width: " + tableWidth)
if (tableWidth > maxWidth) {
table.style.display = "none";
} else {
table.width = "98%"
}
}
// Adjust Links
updateLinks(container)
}
function resizeImages(container, maxWidth) {
var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = images[i];
var width = parseInt(window.getComputedStyle(img, null).getPropertyValue('width'));
var height = parseInt(window.getComputedStyle(img, null).getPropertyValue('height'));
if (width > maxWidth) {
var ratio = maxWidth/width;
img.style.width = (maxWidth - 30) + "px";
// Some image heights are set to 'auto' so they do not need their height set
if (height != 0) {
img.style.height = parseInt(height * ratio) + "px";
}
}
img.style.display = "block";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
}
}
function updateLinks(container) {
var links = container.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var link = links[i];
var url = link.href
// Test for link to profiles
var peopleLinks = url.search(/\/people\//i);
if (peopleLinks > 0) {
// Move to next profile, leaving link active
continue;
}
// Test for link to a blog
var blogLinks = url.search(/\/blogs\//i);
if (blogLinks > 0) {
// Replace URL with AWB URL
var awbURL = url.replace("https:","awbs:");
link.href = awbURL;
continue;
}
// Disable link
link.href = "javascript:void(0)";
// Set the text color to the same as the parent element so that user can't tell there's a link
var parent = link.parentElement;
link.style.color = window.getComputedStyle(parent, null).getPropertyValue('color');
}
}
// Kick off the formating process after the page load
formatBlogContent();
</script></body>
おそらくもっと答えが必要です。対応するHTMLとCSSのバイブルが役に立つかもしれません。また、「30」は、特に「高さ」が「比率」によって計算されている場合には、かなり恣意的であるように思われます。 –
CSS – TricksfortheWeb
のmax-width：100％ 'を設定するだけですが、' display：block'がうまくいかない場合は、おそらくHTMLにラップ要素がたくさんありますきれいにしたい。結果として得られるHTMLの外観はどうですか？画像上で – dlsso