法務部-楊珣

網站

法務部

姓名

楊珣

檢測日期

2018-04-02

檢測裝置

sony xperia ultra x1

作業系統 與 瀏覽器版本

Andriod 7.0
Chrome版本:65.0.3325.181

解析度(手機螢幕)

360x640 pixels

是否會自動跳入行動版欄位?

壞掉的連結


跑版(影響閱讀)

圖片變形


地圖跑版


表格跑版


無法操作的網頁元素(如按鈕不能按、選單不能選等)

出現亂碼

不能用的外掛程式(Flash、ActiveX、Applet、Silverlight、…)

網站載入緩慢(相對一般網站)

閱讀模式

使用andriod系統

其他(無法判斷屬於以上那個分類的都放在這邊)

對此網站建議(非程式問題皆放置這裡)

同樣的檔案放了兩次

問題

可能原因

iframe的寬度寫死

原始程式

位置:
https://www.moj.gov.tw/cp-35-54-58b94-001.html:306

<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" 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%E8%B2%B4%E9%99%BD%E8%A1%971%E6%AE%B5235%E8%99%9F&sll=25.049058,121.511965&sspn=0.033358,0.054846&brcurrent=3,0x3442a93f510c7ba1:0x731637f5caca2004,0,0x3442ac6c9e3bc587:0xfbdf07e4b530c0a4&ie=UTF8&hq=&hnear=100%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E8%B2%B4%E9%99%BD%E8%A1%97%E4%B8%80%E6%AE%B5235%E8%99%9F&ll=25.041476,121.509862&spn=0.006804,0.011802&z=16&output=embed" title="第二辦公室交通資訊" width="550"></iframe>

建議修改

<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" 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%E8%B2%B4%E9%99%BD%E8%A1%971%E6%AE%B5235%E8%99%9F&sll=25.049058,121.511965&sspn=0.033358,0.054846&brcurrent=3,0x3442a93f510c7ba1:0x731637f5caca2004,0,0x3442ac6c9e3bc587:0xfbdf07e4b530c0a4&ie=UTF8&hq=&hnear=100%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E8%B2%B4%E9%99%BD%E8%A1%97%E4%B8%80%E6%AE%B5235%E8%99%9F&ll=25.041476,121.509862&spn=0.006804,0.011802&z=16&output=embed" title="第二辦公室交通資訊" width="100%"></iframe>

補充:

06

問題

可能原因

用td/ tr(word)排版

原始程式

https://www.moj.gov.tw/cp-95-44593-7d65d-001.html: 308

<TBODY>
<TR>
<TD vAlign=top> <IMG alt=陳常務次長明堂照片 src="http://www.moj.gov.tw/site/moj/public/MMO/moj/陳明堂.jpg" width=200 height=250></TD>
<TD><BR>
<H3>
<DIV id=com_content_h50>陳明堂政務次長</DIV></H3>任職日期:2013/3/11<BR>
<H3>〔學歷〕 </H3>
<UL>
<LI>國立臺灣海洋大學海洋法律研究所博士</LI>
<LI>私立中國文化大學法律研究所碩士</LI>
<LI>私立東吳大學法律學系畢業</LI>
<LI>69年特種考試司法人員考試乙等考試推事檢察官</LI></UL>
<H3>〔經歷〕 </H3>
<UL>
<LI>法務部參事、主任秘書、常務次長</LI>
<LI>臺灣高等法院檢察署檢察官、主任檢察官</LI>
<LI>臺灣宜蘭、板橋、臺北地方法院檢察署主任檢察官</LI>
<LI>臺灣宜蘭、臺北地方法院檢察署檢察官</LI></UL></TD></TR>

建議修改

不要用table改用flex或grid display
因為整個架構都要改,所以只寫出部份修改的pseudo-code

@media (min-width: 1281px) {
  <div style="display: inline-flex; flex-warp: warp;">
    <div style="picture_placeholder" style="width: 40%">
      <!-- img here -->
    </div>
    <div style= "content_placeholder" style="width: 60%">
    <!-- text here -->
    </div>
    ...
  </div>
}
@media (max-width: 1281px){
  <div style="display: inline-flex; flex-warp: warp;">
    <div style="picture_placeholder" style="width: 100%">
      <!-- img here -->
    </div>
    <div style= "content_placeholder" style="width: 100%">
    <!-- text here -->
    </div>
    ...
  </div>
}

問題:

可能原因:

司法改革網頁沒有做RWD

建議修改:

head 中的 meta data 加入

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    @media (max-width: 767px){
        .cp table td {
            display:block
        }
    }
</style>