移动CSS问题 [英] Problem with mobile CSS

问题描述

我正在使用此css为我的测试网站创建一个圆形容器。它在PC上运行良好（它填充了正确的屏幕宽度），但在手机上，屏幕显示固定宽度（约占总屏幕宽度的1/3）。我试过改变各种css参数，但移动尺寸保持不变！我也检查了教程网站的任何线索，但无济于事。任何人都可以提出解决方法吗？



我正在使用的CSS：

＃ RoundedContainer  {
  max-width  ：  95％;  
  width  ：  90％;  
  margin  ：  auto;  
  margin-top  ：   10pt;  
  font-family  ：  Calibri;  
  padding  ：  0.5em 1em 1em 1em;  
   -  m oz-border-radius  ：  10px;  
   -  webkit-border-radius  ：  10px;  
 < span class =code-attribute> border-radius  ：  10px;  
  background-color  ：  #ababab;  
 背景 ：  -webkit-gradient（linear ，左上，左下，从（＃909090）到（＃a0a0a0））;  
 背景 ：  -moz-linear-gradient（top，＃909090，＃a0a0a0）;  
  -moz-box-shadow  ：  5px 5px 10px rgba（0,0,0,0.3）;  
   -  webkit-box-shadow  ：  5px 5px 10px rgba（0,0,0,0.3）;  
  box-shadow  ：  5px 5px 10px rgba（0,0,0,0.3）;  
} 
 

TIA。



我尝试了什么：



我尝试更改各种css参数，并检查了教程网站的任何线索。

解决方案

您应确保该页面具有屏幕大小的视口元标记。将其添加到css链接之前的head部分。

 <   meta     name   =  viewport    content   =  width = device-width，initial-scale = 1.0 < span class =code-attribute>   /  >  

I am using this css to create a rounded container for my test site. It works well on a PC (it fills the correct width of the screen) but on a mobile phone, the screen displays a fixed width (about 1/3 of the total screen width). I have tried changing various of the css parameters but the mobile size remains the same! I have also checked tutorial sites for any clues, but to no avail. Can anyone suggest a way to resolve this?

The css I am using:

#RoundedContainer {
    max-width: 95%;
    width: 90%;
    margin: auto;
    margin-top: 10pt;
    font-family: Calibri;
    padding: 0.5em 1em 1em 1em;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #ababab;
    background: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#a0a0a0));
    background: -moz-linear-gradient(top, #909090, #a0a0a0);
    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

TIA.

What I have tried:

I have tried changing various of the css parameters and have also checked tutorial sites for any clues.

解决方案

You should make sure the page has a viewport meta tag for screen size. Add this to the head section just before your css link.

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

这篇关于移动CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！