國立臺灣交響樂團-楊喻文

wen860806 · 2018年04月28日08:06

網站

國立臺灣交響樂團

姓名

楊喻文

檢測日期

2018-04-28

檢測裝置

OPPO A57

作業系統與瀏覽器版本

Android 6.0.1
Chrome版本：Chrome 65.0.3325.109

解析度（手機螢幕）

320x640 pixels

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

是

壞掉的連結

無

跑版（影響閱讀）問題

首頁
FB寬度應該要滿版解法回文連結

首頁->電子報
每個電子報裡面網頁都是這個樣子，寬度設計的很奇怪

首頁->關於NTSO->附設樂團
圖片沒有等比例解法回文連結

首頁->行政公告->採購公告->2018NTSO音樂夏令營團膳
註那邊後面文字被吃掉了解法回文連結

首頁->演奏廳->檔案下載

首頁->資訊公開->施政計畫
還有資訊公開中的[預決算、書面之公共工程及採購契約、保有及管理個人資料之項目、廣告執行]
以及便民服務中的[下載專區]
格式感覺是錯的解法回文連結

首頁->便民服務->FAQ
這些這些問題中，有一些有網址的都會跑出去解法回文連結

首頁->便民服務->資訊圖像的兩個台灣地圖
文字消失(兩個都有唷) 解法回文連結

首頁->資訊安全政策宣告
文字消失解法回文連結

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

無

出現亂碼

無

不能用的外掛程式（Flash、ActiveX、Applet、Silverlight、…）

無

網站載入緩慢（相對一般網站）

無

閱讀模式

我使用安卓

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

首頁
不知道這個點點是甚麼

首頁
好友分享是白的，不知道裡面有甚麼內容

首頁->音樂文化園區->行政大樓->研習中心
研習中心一和二應該要有圖

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

首頁->相簿
文字部分可以加長一點，使兩行可以都在灰底的地方而不至於擋到圖

#優點

首頁->音樂文化園區->園區環景
我覺得這個功能很棒，可以讓大家看到裡面樣貌，而且拍的很漂亮

youyuchen.alice · 2018年05月03日14:01

問題：

可能原因：

iframe內德div寬度設為固定數值，導致跑版。

原始程式：

位置： view-source:國立臺灣交響樂團-首頁
1183行 - iframe內的div

<div class="_2p3a" style="min-width: 180px; width: 210px;">
<div class="_2lqh" style="max-height: 130px;">
<div style="height: 130px;" class="_1drm _1ds3" id="u_0_1v">
<div class="uiScaledImageContainer _2zfr" style="width:210px;height:130px;">
<img class="scaledImageFitHeight img" src="https://scontent.fkhh1-1.fna.fbcdn.net/v/t1.0-9/31444842_2177441755604860_7765108808141965786_n.jpg?_nc_cat=0&amp;_nc_eui2=v1%3AAeHpB1CsB4zkj3GmziVZDJYsVw8eaHBNxIQnWn8m5wW-7VgNfAY4zdvOo5ENBSGMN03k8COM7Id3HM89jEolzKYhYt3cWECoLSOfGygTyq0_-g&amp;oh=c9219b913083eea84dadd36a02cbfab3&amp;oe=5B8C3634" style="left:-70px;" alt="NTSO 國立臺灣交響樂團的相片。" width="352" height="130">
</div>

建議修改：

將寬度皆改為100%，並把style="left:-70px;"刪除。

<div class="_2p3a" style=" width: 100%;">
<div class="_2lqh" style="max-height: 130px;">
<div style="height: 130px;" class="_1drm _1ds3" id="u_0_1v">
<div class="uiScaledImageContainer _2zfr" style="width:100%;height:130px;">
<img class="scaledImageFitHeight img" src="https://scontent.fkhh1-1.fna.fbcdn.net/v/t1.0-9/31444842_2177441755604860_7765108808141965786_n.jpg?_nc_cat=0&amp;_nc_eui2=v1%3AAeHpB1CsB4zkj3GmziVZDJYsVw8eaHBNxIQnWn8m5wW-7VgNfAY4zdvOo5ENBSGMN03k8COM7Id3HM89jEolzKYhYt3cWECoLSOfGygTyq0_-g&amp;oh=c9219b913083eea84dadd36a02cbfab3&amp;oe=5B8C3634" alt="NTSO 國立臺灣交響樂團的相片。" width="100%" height="130">
</div>

補充：

(修正後之截圖)
101

youyuchen.alice · 2018年05月03日14:07

問題：

可能原因：

圖片寬度設為固定數值，導致跑版。

原始程式：

位置： view-source:NTSO臺灣管樂團-國立臺灣交響樂團-NTSO臺灣管樂團
613行

<img alt="附設管樂團團照" src="https://mocfile.moc.gov.tw/history//NTSO/Code/Resource/978e7f44-ce23-4eff-b4e4-e25ecee82f63.jpg" style="width: 493px; height: 218px;" data-mce-src="https://mocfile.moc.gov.tw/history//NTSO/Code/Resource/978e7f44-ce23-4eff-b4e4-e25ecee82f63.jpg" data-mce-style="width: 493px; height: 218px;">

建議修改：

將寬度改為100%。

<img alt="附設管樂團團照" src="https://mocfile.moc.gov.tw/history//NTSO/Code/Resource/978e7f44-ce23-4eff-b4e4-e25ecee82f63.jpg" style="width: 100%;" data-mce-src="https://mocfile.moc.gov.tw/history//NTSO/Code/Resource/978e7f44-ce23-4eff-b4e4-e25ecee82f63.jpg" data-mce-style="width: 100%;">

補充：

(修正後之截圖)
102

youyuchen.alice · 2018年05月03日14:17

問題：

可能原因：

備註的table寬度設為固定數值，導致跑版。

原始程式：

位置： view-source:國立臺灣交響樂團-首頁
619行

<table class="mce-item-table" style="WIDTH: 690px" border="0" data-mce-style="width: 690px;">
  <tbody>
    <tr>
      <td class="T12" valign="top">註：</td>
      <td valign="top"><span style="COLOR: #ff0000" data-mce-style="color: #ff0000;" color="red"><strong>◎</strong></span>以上招標公告內容如與招標文件不一致者，請依政府採購法第41條向招標機關反映。</td>
    </tr>
  </tbody>
</table>

建議修改：

在備註標籤的style中加入word-wrap: break-word;。

<table class="mce-item-table" style="WIDTH: 100%; word-wrap: break-word;" border="0" data-mce-style="width: 100%; word-wrap: break-word;">
  <tbody>
    <tr>
      <td class="T12" valign="top">註：</td>
      <td valign="top"><span style="COLOR: #ff0000" data-mce-style="color: #ff0000;" color="red"><strong>◎</strong></span>以上招標公告內容如與招標文件不一致者，請依政府採購法第41條向招標機關反映。</td>
    </tr>
  </tbody>
</table>

補充：

(修正後之截圖)
103

youyuchen.alice · 2018年05月03日14:33

問題：

可能原因：

表格結構設置錯誤，導致跑版。

原始程式：

位置： view-source:國立臺灣交響樂團-檔案下載
634行

<table class="table table-block table-bordered">
        <tr>
            <th>標題</th>
            <th class="date-th" style="width: 180px;">檔案</th>
            <th class="date-th">發布日期</th>
        </tr>
                <tr>
                    <td>行政大樓多功能教室場地設備使用申請表件(1061007修)</td>
                    <td>
                        <div class="downdiv">
                            <span>檔案 1:</span>
                                <a href="https://docs.google.com/gview?embedded=true&amp;url=https://mocfile.moc.gov.tw/files/201710/902aacb4-11e7-42e5-aa21-3007f1f0b979.pdf" title="行政大樓多功能教室場地設備使用申請表件.pdf" target="_blank">預覽</a>                            <a href="/downloadfile?fid=40368" title="行政大樓多功能教室場地設備使用申請表件.pdf" target="_blank">下載[PDF]</a>
                          
                        </div>

                    </td>
                    <td class="date">2017/10/07</td>
                </tr>
.
.
.
(以下省略)

建議修改：

將表格結構重新排列，解法如下：

在<style>...</style>之間放入：

@media (max-width: 736px) {
  .table-rwd{min-width: 100%;}
  /*針對tr去做隱藏*/
  tr.tr-only-hide {display: none !important;}
  .table-rwd tr{
    display: block;
    border: 1px solid #ddd;
    margin-top: 5px;
    }
  .table-rwd td {
    text-align: left;
    font-size: 15px;
    overflow: hidden;
    width: 100%;
    display: block;
    }
   .table-rwd td:before {
    content: attr(data-th) " : ";
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 10px;
    color: #0c5904;
  }
  .table-rwd.table-bordered td,.table-rwd.table-bordered th,.table-rwd.table-bordered{border:0;}
  
}

在<table class" ... ">裡加入"table-rwd"：

<table class="table table-block table-bordered table-rwd">

在標題列的<tr>裡加入"tr-only-hide"：

<tr class="tr-only-hide">

在內容列的<td>裡加入data-th="標題名稱"：

<td data-th="標題">行政大樓多功能教室場地設備使用申請表件(1061007修)</td>
<td data-th="檔案">
  <div class="downdiv">
    <span>檔案 1:</span>
    <a href="https://docs.google.com/gview?embedded=true&amp;url=https://mocfile.moc.gov.tw/files/201710/902aacb4-11e7-42e5-aa21-3007f1f0b979.pdf" title="行政大樓多功能教室場地設備使用申請表件.pdf" target="_blank">預覽</a>                            <a href="/downloadfile?fid=40368" title="行政大樓多功能教室場地設備使用申請表件.pdf" target="_blank">下載[PDF]</a>                          
  </div>
</td>
<td data-th="發布日期" class="date">2017/10/07</td>

補充：

(修正後之截圖)
104

youyuchen.alice · 2018年05月03日14:41

問題：

可能原因：

超連結為連續英文字串，無法自動換行，導致跑版。

建議修改：

在連結標籤裡加入word-break: break-all;。

youyuchen.alice · 2018年05月03日14:46

問題：

可能原因：

表格區塊，無法自適應螢幕，導致跑版。

原始程式：

位置：view-source:國立臺灣交響樂團-首頁
613行

<table border="0" cellspacing="0" cellpadding="0" width="575" class="mce-item-table">

建議修改：

在連結標籤裡加入style="display:block;"。

<table border="0" cellspacing="0" cellpadding="0" width="575" class="mce-item-table" style="display:block;">

補充：

(修正後之截圖)
105

youyuchen.alice · 2018年05月03日14:57

問題：

可能原因：

內容區塊，無法自適應螢幕，導致跑版。

原始程式：

位置：view-source:資訊安全政策宣告-國立臺灣交響樂團-資訊安全政策宣告
612行

<div style="width: 595px; min-height: 800px; padding-bottom: 20px;">
  <table class="table002" border="0" cellspacing="0" cellpadding="0" width="595">
    <tbody>
      <tr>
        <td>

建議修改：

將div以及table標籤裡的寬度分別改為80%以及100%。

<div style="width: 80%;min-height: 800px;padding-bottom: 20px;">
  <table class="table002" border="0" cellspacing="0" cellpadding="0" width="100%">
    <tbody>
      <tr>
        <td>

補充：

(修正後之截圖)
106

國立臺灣交響樂團-楊喻文

網站

姓名

檢測日期

檢測裝置

作業系統 與 瀏覽器版本

解析度（手機螢幕）

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

壞掉的連結

跑版（影響閱讀）問題

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

出現亂碼

不能用的外掛程式（Flash、ActiveX、Applet、Silverlight、…）

網站載入緩慢（相對一般網站）

閱讀模式

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

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

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

建議修改：

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

原始程式：

建議修改：

補充：

作業系統與瀏覽器版本