如何在移動設備html頁面的表格單元格中設置相同的字體大小

我在移動設備上進行字體呈現時遇到了問題。我有一個簡單的表格寬度設置固定爲800像素，通用尺寸爲今天的手機。如何在移動設備html頁面的表格單元格中設置相同的字體大小

我的單元格中的文字都使用相同的html css化妝。第一行中的文本顯示ok

但是下一行是一個問題，它被分成兩個單元格。左側單元格是一張圖片，右側單元格中有一些文字。我的問題是，大多數移動Web瀏覽器縮小該單元格中的字體大小。

對我來說，如果該文本只是分散在更多的線條上，但不會發生，它們往往會保留與桌面瀏覽器視圖中相似的線條。

我設置使用PT像素並在CSS文件中像

.DefaultFont 
{ 
font-family: 'Merriweather Sans', Arial,verdena,sans-serif; 
font-size: 13pt; 
font-style: normal; 
color:#4e0203; 
font-weight: 400; 
}

沒有影響使用13pt 13em等方法等沒有什麼工作的字體大小。

而對於使用span和div和p的html元素並在td元素中嘗試它，但是再次沒有效果。

PS我不是在尋找縮放頁面客戶端與設備檢測等JavaScript技巧。因爲我只是使用PHP來確定其桌面或移動設備（這需要傳輸更少的代碼）。我只需要代碼，以便字體不會因爲移動Web瀏覽器而導致更改。

我該如何阻止這些客戶端重新調整部分表格的大小？

解決方案 ，在這裏工作非常好的是多人組合的最終解決方案。

集表格寬度在％
集的字體大小在VW（其中類似％也具有100指數），一個較低的值如2左右。
注意vw支持更多的只是字體大小，還有圖像。
包括meta標籤，它甚至沒有在上面後工作，但要在安全的一面，我推薦它。

來源

2014-09-05 user613326

你能複製http://jsfiddle.net的情況嗎？ – easwee 2014-09-09 22:23:08

你有沒有嘗試設置一個html字體大小，然後使其他元素font-size：1em;？ – Roi 2014-09-10 06:10:47

嘗試將基於％的值用於表格單元格。 – designcise 2014-09-11 10:01:41

也許你應該使用的視口大小的排版單位爲font-size。

當您想通過視口的（元素容器）寬度或高度來調整大小時，可以使用它。或者兩者兼而有之。可能的值是：

VH - 視口的高度
它proportionaly尺寸爲容器的高度。

font-size: 2vh;

VW - 視口的寬度
它proportionaly尺寸爲容器的寬度。

font-size: 2vw;

VMIN - 視口的最低
它proportionaly尺寸爲 'VH' 和 '大衆' 之間的小。

font-size: 2vmin;

VMAX - 視口的最大
它尺寸proportionaly到 'VH' 和 '大衆' 之間大。

font-size: 2vmax;

它肯定會給你你想要的外觀。只需找到當前的比例值，無論屏幕的大小如何，它都適合！

W3 viewport relative length's docs

來源

2014-09-15 14:33:35 LcSalazar

對不起，我遲到了，我還沒有工作100％（生病）。那麼我得說這是縮放字體的好方法，它甚至支持表格寬度。相當不錯。然而，我仍然在桌子的一個單元格中看到問題，它看起來更小。通過手機觀看現場時。我很想看到它使用vmin方法工作。 – user613326 2014-09-18 13:09:24

好吧，我不得不結合你的提示在CSS中使用vw。配合使用由％設置的表格寬度。百分比和大衆價值都有百分之一的規模，因此一起工作很好。然後，我還必須像@Srinivas所說的那樣設置。結果在一起是真棒，其規模自動沒有腳本只是CSS和元標記。我想獎勵你，因爲這是一個非常好的提示，儘管最後我需要將所有提示結合在一起，使其按預期工作。你的提示使它超出了我原本想要的超級！ – user613326 2014-09-18 17:43:57

有點令人驚異我注意到這個問題現在有2500意見（24-10-2017） – user613326 2017-10-24 21:43:39

你試過Meta標籤，以檢查它是否工作......

<meta name="viewport" content="width=device-width, initial-scale=1">

這意味着瀏覽器將（可能）渲染頁面的寬度在自己的屏幕的寬度。因此，如果該屏幕寬度爲320px，則瀏覽器窗口寬度將爲320px，而不是縮小並顯示960px（或默認情況下該設備所做的任何操作，以代替響應式元標記）。

退房，它可能有幫助..

來源

2014-09-10 08:38:55 Srinivas08

我現在正在接近，起初主桌是固定的，與上面的選項它不適合在手機內，我現在用@LcSalazar調整這個;整個網站。我會去除其他格式的所有固定尺寸，但到目前爲止它的走向是我認爲的正確方式。 – user613326 2014-09-18 13:28:24

因爲答案是你和LcSalazar的組合，我投票給他，因爲你已經有了25分，我真的需要這兩個設計。感謝您的提示..哦，順便說一句，設置初始縮放比如0.7或1.5這樣的老問題，初始縮放1本身使我的桌子在移動設備上變大，所以我現在將桌子設置爲90％（用於也有點背景），CSS vw的字體大小以及vw的圖像，這些磁帶可以很好地擴展到任何設備。大多數情況下vw或％很好，有些不喜歡iframe的高度 – user613326 2014-09-18 17:56:15

我想這應該做的伎倆

-webkit-text-size-adjust: none;

來源

2014-09-10 11:34:05

我不確定這將如何在不同的webkit之間工作，所以我沒有測試它可能會很好，它的工作原理，我基於其他人的建議在這裏，但我想說感謝與我一起思考。 – user613326 2014-09-18 17:58:18

您可以使用window.innerHeight。

來源

2014-09-16 10:07:08 Hayzum

如何在移動設備html頁面的表格單元格中設置相同的字體大小

回答

相關問題