移动网站字体大小和包装 [英] Mobile website font sizing and wrapping

问题描述

我有一个简单的静态网站，里面有几行文字。

它只能从移动设备访问，我希望字体大小为文本将是屏幕高度的三分之一，并根据屏幕宽度进行文字换行。

可以使用CSS&文件来完成

。只有HTML？如果是这样，怎么样？

谢谢 解决方案

简单的答案是以编程方式提供基于移动设备的样式表。您可以在CSS文件中使用以下代码：

  @media screen and（max-device-width：480px）{
 font-size：160px; / * 1/3最大屏幕高度* / 
} 
  

或者，您可以使用javascript以计算视口的宽度和高度，然后动态设置样式。

  window.onload = function（）{
 var viewportwidth; 
 var viewportheight; 
 
 if（typeof window.innerWidth！='undefined'）{
 viewportwidth = window.innerWidth，
 viewportheight = window.innerHeight 
} else if（typeof document .documentElement！='undefined'
&& typeof document.documentElement.clientWidth！= 
'undefined'&& document.documentElement.clientWidth！= 0）{
 viewportwidth = document.documentElement.clientWidth，
 viewportheight = document.documentElement.clientHeight 
} else {
 viewportwidth = document.getElementsByTagName（'body'）[0] .clientWidth，
 viewportheight = document.getElementsByTagName（'body'）[0] .clientHeight 
} 
 document.body.style.fontSize = viewportheight / 3; 
 
 
 
 $ b 
在CSS中使用设置wordwrapping：white-space：normal ，如果需要， word-wrap：break-word  
 
I have a simple static website with a couple lines of text in it.

It will be accessed only from mobile devices, and I want that the font size for the text will be 1/3rd of the screen's height and lines to word wrap based on the screens width.

can it be done using CSS & HTML only? if so how?

Thanks
解决方案
The simple answer is to programmatically serve a stylesheet based on the mobile device. You can do this in your CSS file with :
@media screen and (max-device-width: 480px) {
  font-size: 160px; /* 1/3 max screen height */
}
Alternately, you could use javascript to calculate the width and height of the viewport then set the style dynamically.
window.onload = function() {
  var viewportwidth;
  var viewportheight;

  if (typeof window.innerWidth != 'undefined') {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
  } else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
      viewportwidth = document.documentElement.clientWidth,
      viewportheight = document.documentElement.clientHeight
  } else {
      viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
      viewportheight = document.getElementsByTagName('body')[0].clientHeight
  }
  document.body.style.fontSize = viewportheight / 3;
}
Set wordwrapping in CSS with white-space: normal and, if desired, word-wrap:break-word

                        
这篇关于移动网站字体大小和包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！