科技部-楊珣

ray 科技部
, ,
#1

網站

科技部

姓名

楊珣

檢測日期

2018-04-02

檢測裝置

sony xperia ultra xa

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本：Chrome 65.0.3325.181

解析度（手機螢幕）

360x640 pixels

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

是

壞掉的連結

跑版（影響閱讀）問題

文字跑版解法回文連結

圖片跑版解法回文連結

圖示跑版

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

出現亂碼

無

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

無

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

無

閱讀模式

Andriod 不能用

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

無

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

問題一>影片沒有內容

#2

問題

可能原因

雖然說不上是很嚴重的跑版，但是有一部份是因為版面本身是用margin調的，同時margin移的長度也是fixed的

原始程式

位置：https://www.most.gov.tw/folksonomy/detail/?subSite=main&article_uid=f96fc981-c835-44e3-8ce7-7db6f0e92a6c&menu_id=d3c30297-bb63-44c5-ad30-38a65b203288&content_type=P&view_mode=listView : 2017

<p class="resize-p" style="margin-left: 27.05pt;"><span style="color: rgb(0, 0, 128);"><span style="font-size: 16px;"><strong>&nbsp;&nbsp;&nbsp; 一、</strong><strong>為促進...

建議修改

把margin看要是改成%為單位還是vw為單位，這是最基本的。同時非常建議不要每行字都加上span這個tag，span這個語法本身是為了那些特例，如果這段文字全部都要margin，請不要再用span + margin寫了，就算沒有用bootstrap的框架，現在瀏覽器都支援display: flex了，甚至可以用display: grid排版

  ... style="margin-left: 3%" ...

補充

圖片
最上方文字是有調過的，其他下面的全部都照著改就好

#3

問題

可能原因

只有把電腦板做好，然後完全沒有顧手機上的排版
忽視電腦是寬螢幕，手機是長螢幕的事實
圖片設置成fixed長寬雖然也是問題
但是問題更大在於排版不正確
同時有一些文字在手機上看其實是不需要的
舉例來說「名字＋常務次長」的這個欄位已經出現兩次了
因為手機的螢幕小導致其實這樣的設置很詭異

#4

問題

可能問題

圖片固定大小＋非RWD排版

範例程式

位置：https://www.most.gov.tw/folksonomy/detail?subSite=&l=ch&article_uid=a11b5879-8e7d-4f47-b17a-5d4c47e11f8d&menu_id=b2dc90dc-f1a7-4d5f-bce1-b4ddd4039776&content_type=P&view_mode=listView : 1864

<div class="right_box">
<div class="clearfix marb_20 box_420x2">&nbsp;
<div class="box_pic"><img alt="鄒幼涵 常務次長" ...

建議修改

先用inline-flex改排版
然後其實次長的名字在手機板上會很突兀的看到兩次，有點沒有意義所以我就刪掉了
最後這只是手機板的排版，要用的話請用@media設定好手機板跟電腦板，不然就用像是bootstrap這樣有做RWD 框架的css

<div style="display: inline-flex;flex-wrap:wrap;">
  <div style="width: 100%;">
    <img alt="鄒幼涵 常務次長" src="/most/attachments/937ad8d9-0192-48e9-9713-f92b49c33c6d" title="鄒幼涵 常務次長" style="margin-left:auto; margin-right:auto">
  </div>
  <div style="width: 100%; height: 10vh;"></div>
  <div style="width: 100vw; text-align:center">
    <p>學歷/現任</p>

<p>輔仁大學統計學系畢業<br>
國立中央大學統計學系碩士<br>
輔仁大學商學研究所博士<br>
<br>
<strong>現職 /</strong> 科技部 常務次長</p>
</div>
<div style="width: 100%; height: 10vh;"></div>
<div style="width: 100%; text-align: center;">
<p>主要經歷</p>

<p>財政部金融局統計室主任(88.01-92.09)<br>
行政院主計處簡任編審、視察(92.09-95.10)<br>
行政院國家科學委員會綜合業務處副處長(95.10-98.09)<br>
行政院國家科學委員會國際合作處副處長(98.09-99.07)<br>
駐英國代表處科技組組長(99.07-102.09)<br>
行政院國家科學委員會綜合業務處處長(102.09-103.03)<br>
科技部綜合規劃司司長(103.03-103.09)<br>
駐法國代表處科技組組長(103.09-106.09)<br>
科技部常務次長(106.09迄今)</p>
</div>
  </div>

補充

圖片
然後其實網站右上角的按鈕文字也跑版了

財政部北區國稅局--楊珣
財政部中區國稅局-劉佳慧
臺灣區國道高速公路局-楊喻文
金融監督管理委員會_姿瑩
國軍退除役官兵輔導委員會退除役官兵就學進修輔助--楊珣
法務部矯正署-劉佳慧
教育部國立公共資訊圖書館-林文琦
行政院原子能委員會－謝茵安
教育部體育署－高偉庭
文化部國立臺灣工藝研究發展中心－高偉庭
標準檢驗局－高偉庭
教育部國立臺灣科學教育館---吳姿瑩
教育部青年發展署-林文琦
行政院農業委員會林務局-劉佳慧
國際貿易局新南向政策專網－高偉庭
低碳永續家園資訊網－謝茵安
行政院人事行政總處e等公務園+學習平臺--楊珣