Iphone 上的 CSS Wordpress 博客答案

【问题标题】：CSS Wordpress Blog on IphoneIphone 上的 CSS Wordpress 博客
【发布时间】：2012-07-07 07:47:47
【问题描述】：

我正在写这个 wordpress 博客 http://www.taranmarlowjewelry.com/?page_id=7（在普通的网络浏览器上看起来不错）我尝试编辑 CSS，使其在 iphone 上看起来不错...我在我的 iphone css 文件中添加了这些行

.wrapper{
    position:relative;
    width:840px;
    margin:0 auto;
}

.blog #page{
    width:840px !important;
}

.blog #main{
    width:840px !important;
}

.blog #primary {
    width:220px !important;
}

.blog #content {
    width: 220px !important;
}

.blog #secondary {
    width:200px !important;
    float:right !important;
}

但是博客和侧边栏之间有很大的空间，这个页面的宽度太宽了，而我的主页，关于页面看起来很好用 .wrapper 宽度为 840px;

这里出了什么问题？

【问题讨论】：

哇，有很多 !important 关键字！尽量少用……
不，没有做任何事情 :( 但感谢 TheZ
这不是解决你的问题，只是对你的风格的评论。
啊，我明白了...但是谢谢！

标签： iphone css wordpress

【解决方案1】：

您是否尝试过使用初始比例？

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

添加它并相应地调整您的 CSS。

【讨论】：

谢谢肖恩，我会试试这个:)

【解决方案2】：

正确的方法是使用响应式主题，因此您需要为所有框架格式包含一个 base.css 样式表，然后为每个新的框架格式添加样式表。比如：

http://yourdomain.com/library/css/style.css' type='text/css' media='(min-width:481px)' />

然后您可以使用该样式表中的函数将更多样式应用于更大的框架格式。 Bones Theme（by themble）是开始学习响应式网页设计的好地方。

如果不这样做 - 肖恩是对的，从元视口设置开始，然后从那里进行调整。这里有一个关于 iPad 和 iPhone 屏幕尺寸的好答案iPad browser WIDTH & HEIGHT standard

安迪

【讨论】：