我有一个移动的Web应用程序,其中包含多个列表项的无序列表,每个列表中都有一个超链接:
...我的问题是如何格式化超链接,以便在iPhone上查看时不会改变大小,并且accellerometer从纵向切换 - >横向?现在,我的超链接字体大小规格为14px,但是当切换到横向时,它会爆炸到20px.我希望font-size保持不变.这是代码:
ul li a
{
font-size:14px;
text-decoration: none;
color: #cc9999;
}Run Code Online (Sandbox Code Playgroud)
<ul>
<li id="home" class="active">
<a href="home.html">HOME</a>
</li>
<li id="home" class="active">
<a href="test.html">TEST</a>
</li>
</ul>Run Code Online (Sandbox Code Playgroud)
我添加了"viewport"元标记"width=device-width,initial-scale=1.0",在iPad上,页面在横向模式下加载很好,它可以很好地切换到纵向,当我将其旋转回横向时,它会缩放页面,我必须将其缩放回到1比例.
我可以通过添加来修复此问题"maximum-scale=1.0, user-scalable=no",但我想知道是否有一种方法可以解决这个问题,而不会让用户放弃页面.
如果您有任何建议我很乐意听到,
谢谢!
我的测试页面位于:http://dev.my-igloo.net/ps-rwd/
我试图让我周围的媒体查询头和更改网站宽度根据浏览器的宽度 - 该网站有对iPad和iPhone,并在那一刻我测试它的iPad和去稍微疯狂工作.
请记住,网站设计/布局目前还不完整,因为我只是在处理初始设置,然后再深入研究完善所有内容.我为每个样式表设置了不同的背景颜色,以便很容易看到加载了哪一个.
我头上有这个标签:
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
Run Code Online (Sandbox Code Playgroud)
如果我像这样设置我的媒体查询:
<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" />
<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 769px)" />
<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 481px) and (max-width: 768px)" />
<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 321px) and (max-width: 480px)" />
Run Code Online (Sandbox Code Playgroud)
当我在横向模式下在iPad上进行测试时,页面会加载默认样式表,但会进行缩放,我必须左右滚动才能看到整个布局,或者捏缩放以缩小以使其适合屏幕.
我怎么能避免这个?我认为通过将初始比例设置为1.0将使其加载而不放大.
然后我将媒体查询改为:
<!-- For Desktop Browsers -->
<link …Run Code Online (Sandbox Code Playgroud)