Question

如果屏幕低于某个宽度，我想在我的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 shot enter image description here

Answer 1

如果使包含元素的宽度变小，它将自动断开该行。

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

@media (max-width: 600px) {
    #someelement { display: none; }
    #someotherelement { display: block; }
}

Answer 2

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

CGFloat width = [UIScreen mainScreen].bounds.size.width;

Answer 3

与@Jonas相反的逻辑

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

@media (max-width: 600px) {  
    /* force <br> on narrow screen: */
    #someelement br { display: block; }
}

仅限窄屏幕上的html换行符

3 个答案: