{"id":74178,"date":"2026-08-04T03:01:00","date_gmt":"2026-08-03T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=74178"},"modified":"2026-08-03T16:09:45","modified_gmt":"2026-08-03T06:09:45","slug":"emulating-android-on-macos-landing-page-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emulating-android-on-macos-landing-page-tutorial\/","title":{"rendered":"Emulating Android on macOS Landing Page Tutorial"},"content":{"rendered":"
\"Emulating<\/a>

Emulating Android on macOS Landing Page Tutorial<\/p><\/div>\n

During yesterday’s Emulating Android on macOS Revisit Tutorial<\/a>‘s Android emulations we noticed our Landing Page<\/a> “Programming” word overflowed on the Android mobile device screen (we got going via an Android Studio Device Manager Pixel Sim emulation)<\/font>. Maybe we’d allow that through on occasions, but it grates with us when it happens on the Landing Page so the Javascript “at document.body onload event” intervention …<\/p>\n


\n if (navigator.userAgent.match(\/Android\/i)) {
\n document.getElementById('toph1').innerHTML=document.getElementById('toph1').innerHTML.replace(' Programming', ' <h2>Programming<\/h2>');
\n }
\n<\/code><\/p>\n

… was deployed with less aaaarrrrgggghhh about it!<\/p>\n

Did You Know<\/i><\/b><\/p>\n

Quite often, confronted with a similar initial scenario where the HTML goes something like …<\/p>\n


\n<h1 id=\"toph1\" class=\"w3-margin w3-jumbo\">RJM Programming<\/h1>
\n<\/code><\/p>\n

… we might have gone, instead …<\/p>\n


\n if (navigator.userAgent.match(\/Android\/i)) {
\n document.getElementById('toph1').innerHTML=document.getElementById('toph1').innerHTML.replace(' Programming', ' <span>Programming<\/span>');
\n }
\n<\/code><\/p>\n

… where the span<\/i><\/a> element we see as the natural “inline” infilling HTML element type of choice. Here, though, we opted for h2<\/i><\/a> in preference, it being such an obvious header element scenario. Also, Javascript DOM could have been used to adjust font size via Javascript like …<\/p>\n


\n[element].style.fontSize='14px';
\n<\/code><\/p>\n

\n

\n

Previous relevant Emulating Android on macOS Revisit Tutorial<\/a> is shown below.<\/p>\n

\"Emulating<\/a>

Emulating Android on macOS Revisit Tutorial<\/p><\/div>\n

Yes, we did once own an Android mobile device as Voicemail Disabling on Android Primer Tutorial<\/a> can attest to below. But we haven’t had one, physically like this, functional, for some time now.<\/p>\n

We primarily work on macOS with this MacBook Air and with an iOS iPhone and\/or iPad. We know from mobile work in the past, that does not mean you do not have available to you options to …<\/p>\n

\nEmulate an Android mobile device\n<\/p><\/blockquote>\n

… via two macOS IDE<\/a> ideas we can think of, those being …<\/p>\n