Menacing Cloud

iPhone Title Shortening

Website titles are difficult to get right for many reasons. Creating one that is catchy, subject relevant and SEO friendly can be tricky.

iPhone, iPad and many other mobile devices allow you to bookmark a website to the home screen. However, the default page title used for the bookmark can be a bit too long.

To save the person bookmarking from having to shorten the title manually we can use JavaScript title modification when a small screen is detected.

// Shorten title for devices of iPad pixel width or less if(screen.width <= 1024) document.title = 'Short Title';

Alternatively you could make your decision based on the width of the viewport. iPhone, iPad etc. tend to have default viewport widths of less than 1024.

// Shorten title for devices of iPad viewport width or less if(document.documentElement.clientWidth <= 1024) document.title = 'Short Title';

Browser sniffing could be used, but a simple screen width check catches more devices that might find the shortened title useful.


Comments, suggestions or feedback via Optic Swerve on Twitter please.

Follow the author on Twitter.

ProtoFluid. ‘Effortless responsive web design testing’.

Previous Articles

Canvas Generated Icons. Read more.

Targeting Windows 8 Snap Mode. Read more.

CSS @viewport rule or viewport meta tag? Read more.

The Responsive Viewport. Missing piece of the responsive web design puzzle? Read more.

Getting the Viewport Scale.
Read more.

Hiding the iPhone Address Bar.
Read more.

Orientation Correct Screen Width.
Read more.

iPhone Title Modification.
Read more.

Optimising for High Pixel Density Displays.
Read more.

CSS3 Media Query Prototyping With ProtoFluid.
Read more.

AJAX Kill Switch. Version 2.
Read more.

URI Processing With JavaScript.
Read more.

Source Code

All source code is provided for free.

A standard disclaimer of warranty and limitation of liability applies.