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.
// 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.
‘Effortless responsive web design testing’.
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.
Hiding the iPhone Address Bar.
Orientation Correct Screen Width.
iPhone Title Modification.
Optimising for High Pixel Density Displays.
CSS3 Media Query Prototyping With ProtoFluid.
AJAX Kill Switch. Version 2.
All source code is provided for free.