CODEWITHSUNDEEP
htmliosscreen
William Jockusch
William Jockusch

Reputation: 27335

html line break on narrow screen only

I want to put something into my html that forces a line break if the screen is below a certain width. This is for iOS. Can I do that?

Or, even better, is there a way to do some kind of if/else/endif that triggers off of screen width? Something like this:

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

If it matters, which I'm hoping it won't, this is for an iOS device, at least initially.

EDIT: Here is an example:

<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>

Output is good on the iPhone, not so much on the iPad. See the bottom portion of each screen shot:

iphone shot enter image description here

Upvotes: 0

Views: 210

Answers (3)

Atara
Atara

Reputation: 3569

opposite logic to @Jonas

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

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

Upvotes: 0

Jonas &#196;ppelgran
Jonas &#196;ppelgran

Reputation: 2747

If you make the containing element less wide it will automatically break the line.

Or if you like to have more control you could use a CSS media query like this:

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

Upvotes: 1

Prateek Prem
Prateek Prem

Reputation: 1544

You can get screen width by using this code:

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

Upvotes: 0

Related Questions