問題:
可能原因:
iframe的寬度屬性設定錯誤,未跟著行動載具螢幕大小改變
原始程式:
Xpath:/html/body/div/section/div[2]/p/iframe
<iframe title="位置圖" width="550" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.tw/maps?f=q&source=s_q&hl=zh-TW&geocode=&q=%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E7%A7%80%E5%B1%B1%E8%A1%974%E8%99%9F14%E6%A8%93&aq=&sll=25.040125,121.50777&sspn=0.004501,0.006856&vpsrc=6&brcurrent=3,0x3442a8de05b73b09:0x64e4cd4874161dde,0,0x345d5538b0b6645f:0x5aa90dfa6620edc0&ie=UTF8&hq=&hnear=100%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E7%A7%80%E5%B1%B1%E8%A1%974%E8%99%9F&ll=25.043576,121.50925&spn=0.00486,0.00589&z=17&output=embed"></iframe>
建議修改:
修改插入地圖的iframe中的長寬寫法,移除寬度,對應螢幕將長度下修為300px,如下:
<iframe title="位置圖" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.tw/maps?f=q&source=s_q&hl=zh-TW&geocode=&q=%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E7%A7%80%E5%B1%B1%E8%A1%974%E8%99%9F14%E6%A8%93&aq=&sll=25.040125,121.50777&sspn=0.004501,0.006856&vpsrc=6&brcurrent=3,0x3442a8de05b73b09:0x64e4cd4874161dde,0,0x345d5538b0b6645f:0x5aa90dfa6620edc0&ie=UTF8&hq=&hnear=100%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E7%A7%80%E5%B1%B1%E8%A1%974%E8%99%9F&ll=25.043576,121.50925&spn=0.00486,0.00589&z=17&output=embed"></iframe>
補充
結尾(選填,可增加網站建議)
問題:
可能原因:
圖片的寬長度設定問題
原始程式:
Xpaht:/html/body/div/section/div[2]/table/tbody/tr/td[1]/p[1]/img
<img alt="環境即時通APP使用畫面 圖2" src="/public/MMO/epa/envi_mg02.png" width="250" height="376">
建議修改:
移除長寬設定,恢復原圖大小
<img alt="環境即時通APP使用畫面 圖2" src="/public/MMO/epa/envi_mg02.png">
補充
結尾(選填,可增加網站建議)
但此頁面還有版面問題,修正完圖片後依然看得不清楚,建議重新設計
問題:
可能原因:
檢查後兩個問題
1.diz的z軸順序顛倒,導致被前面div擋住
2.選單未加背景
原始程式:
Xpath://*[@id=“main-navbar-collapse”]
<div class="navbar-collapse collapse" id="main-navbar-collapse" style="margin-left: 100px; width: 80%; height: 21.000009536743164px;" aria-expanded="false">
.......
.....
</div>
建議修改:
增加z-index:1
<div class="navbar-collapse collapse" id="main-navbar-collapse" style="margin-left: 100px; width: 80%; z-index: 1; height: 21.000009536743164px;" aria-expanded="false">
.......
.....
</div>
另外要加上背景顏色
Xpath://*[@id=“menutable”]
<div id="menutable" style="
background: white">
.....
....
</div>
補充
不確定是否符合原設定,這邊只解決選單擋住問題
結尾(選填,可增加網站建議)
問題:
可能原因:
字體過大
原始程式:
位置:https://epamail.epa.gov.tw/Front/Content/css/custom/_home-card.scss:171
> span {
padding-left: 24px;
padding-right: 36px;
font-size: 24px;
color: #474F5C;
}
建議修改:
修改174行的字體大笑
> span {
padding-left: 24px;
padding-right: 36px;
font-size: 20px;
color: #474F5C;
}
補充
修改20就可以
結尾(選填,可增加網站建議)
問題:
可能原因:
文字置中
原始程式:
位置:https://epamail.epa.gov.tw/Front/Content/css/bootstrap/_type.scss:98
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
建議修改:
修改101行的文字置左
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: left; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
補充
結尾(選填,可增加網站建議)