简体   繁体   English

带有CSS的移动网站,但不响应屏幕尺寸吗?

[英]Mobile website with CSS, but doesn't respond to screen size?

I've just completed a mobile site for a client, and I've mainly focused on the website's lightness and responsiveness. 我刚刚为客户完成了一个移动网站 ,主要关注该网站的亮度和响应能力。 I haven't worked on redirecting the website because it's still a work in progress BUT all the vital components have been done. 我尚未进行网站重定向,因为它仍在进行中,但所有重要组件均已完成。
Now if you view the website in your computer and resize your browser, you'll see how it changes according to the viewport's width. 现在,如果您在计算机上查看网站并调整浏览器的大小,您将看到网站根据视口的宽度而变化。 But I tried viewing it in my smartphone (Samsung Galaxy S2) and I end up seeing the whole website squished into the available viewport. 但是我尝试在我的智能手机(三星Galaxy S2)中查看它,最终我看到整个网站被压缩到可用的视口中。
Why is this happening and what do I do to make it work? 为什么会发生这种情况,我该怎么做才能使其起作用? Thank you very much for your time! 非常感谢您的宝贵时间!

Mobile browsers won't know what to do unless you specifically instruct them. 除非您特别指示移动浏览器,否则不知道该怎么办。

The viewport metatag is essential when designing responsive layouts. 设计响应式布局时,视口元标记至关重要 To fix this problem, simply add the following tag to your website's <head> : 要解决此问题,只需将以下标记添加到您网站的<head>

<meta name="viewport" content="width=device-width">

If you feel that you need to zoom out a tiny bit more (I personally prefer this), you can also make some small tweaks to get a cool look: 如果您觉得需要缩小一点(我个人比较喜欢),则还可以进行一些小的调整以得到漂亮的外观:

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

Have fun, 玩得开心,

Adam. 亚当。

Check your CSS. 检查您的CSS。 You haven't closed your curly brace. 您尚未关闭花括号。 or you have typo error. 或您输入错误。

/* =Responsive: Small screen to tablet & IPAD
-------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
.navbar .nav li a {
 padding-right: 5px;
 pading-left: 5px;
}

example css. 示例CSS。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM