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

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

Follow the author on Twitter.

Source Code

All source code is provided for free.

A standard disclaimer of warranty and limitation of liability applies.