0

如果屏幕低于某个宽度，我想在我的 html 中放入一些强制换行符的内容。这是针对 iOS 的。我可以这样做吗？

或者，更好的是，有没有办法执行某种触发屏幕宽度的 if/else/endif？像这样的东西：

if screen width < 600 pixels
   some html
else
   some other html
endif

如果它很重要，我希望它不会，这适用于 iOS 设备，至少最初是这样。

编辑：这是一个例子：

<body>
    In spherical coordinates, given a vector field
    <math>
        <mn class="boldMath">F&#x2006;</mn>
        <mn>(</mn>
        <mi>r</mi>
        <mn>, </mn>
        <mi>&theta;</mi>
        <mn>, </mn>
        <mi>&phi;</mi>
        <mn>)</mn>
    </math>, the curl is<br>
    <math>
        <mrow>
            <mn mathvariant="bold">&nabla;</mn>
            <mn>&nbsp;&times;&nbsp;</mn>
            <mi mathvariant="bold">F</mi>
            <mn>&nbsp;=&nbsp;</mn>
        </mrow>
    </math>  <!-- I need a line break here on the phone, but not on the pad.  On the iPad, I would be delighted to have the above included in the mtable below.>
    <div class="center">
        <math>
            <mtable>
                                  <!-- long mtable here -->
            </mtable>
        </math>
    </div>
</body>

iPhone 上的输出很好，iPad 上的输出不是很多。查看每个屏幕截图的底部：

iphone 拍摄 在此处输入图像描述

4

3 回答 3

1

如果您使包含元素的宽度变小，它将自动换行。

或者，如果您想拥有更多控制权，可以使用这样的 CSS 媒体查询：

@media (max-width: 600px) {
    #someelement { display: none; }
    #someotherelement { display: block; }
}
于 2013-06-08T13:25:33.663 回答
0

您可以使用以下代码获取屏幕宽度：

CGFloat width = [UIScreen mainScreen].bounds.size.width;
于 2013-06-08T13:10:21.060 回答
0

与@Jonas 的逻辑相反

#someelement br {  
    /* ignore <br> on large screen: */
    display: none;
}

@media (max-width: 600px) {  
    /* force <br> on narrow screen: */
    #someelement br { display: block; }
}
于 2017-01-03T14:00:35.690 回答