![[Home page]](../PythonPowered.gif "Home page"){kind=small}
| Books | Code | Blog | Python | Author | Train | Find | ©M.Lutz |
File: site-mobile-screenshots/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- Unicode -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- mobile -->
<style>
body {font-family: Arial, Helvetica, sans-serif;} /* title etc. text */
td {font-family: arial; font-style: italic;} /* thumbs-table text */
html {-webkit-text-size-adjust: 100%;} /* ios landscape no zoom */
body {
margin-left: 12px; /* offset the entire page for curved screens */
margin-right: 12px; /* or padding: inside a border (margin outside) */
}
</style>
<!-- plus analytics code, etc. -->
<!-- anonymous analytics to prioritize work: enabled in online resources only -->
<!--
Anonymous analytics to prioritize work, enabled in online resources
only. Automatically inserted on demand by tweak-analytics.py.
-->
<!-- 1) Universal Analytics tag (custom): stops collecting data on Jul-1-2023 -->
<SCRIPT>
// Start async JS-file fetch, if not already cached
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
// Queue actions to run in order after async JS-file fetch finished
ga('create', 'UA-52579036-1', 'auto'); // Create tracker object (and queue)
ga('set', 'anonymizeIp', true); // Anonymize IP addr (&aip) [Jun-2019]
ga('send', 'pageview'); // Send page-view event now
</SCRIPT>
<!-- 2) Google Analytics 4 tag: added to site Oct-2022 (okay to keep UA tag) -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-J8CTEZHX3L"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-J8CTEZHX3L');
</script>
<!-- End analytics insert -->
<title>Mobile Screenshots</title>
</head>
<body>
<h1>Mobile Screenshots</h1>
<p>
Scenes from this site's 2018 mobile-friendly conversion project.
<I><A href="../thumbspage.html">thumbspage</A></I> usage note: this page uses both
<A href="user_configs-changes.txt">user_configs.py</A> settings for colors and a custom
<A href="../cgi/showcode.py?name=site-mobile-screenshots/HEADER.html">header file</A>
for thumbs-table font, and was made like <A HREF="_publish.sh">this</A>
(and earlier, <A HREF="how-made.txt">this</A>).
Nit: a " quote filename character formerly used here for inches works on this site's
server and is handled properly by thumbspage if
<A href="../cgi/showcode.py?name=site-mobile-screenshots/index.html">present</A>,
but was changed to "in" for portability to some platforms; avoid as needed.
</p>
<!-- ======================================================================= -->
<!-- END CUSTOM HEADER -->
<!-- ======================================================================= -->
<!-- ======================================================================= -->
<!-- START FLOATING TOP -->
<!-- ======================================================================= -->
<!-- HTML+styles+JavaScript for optional index floating Top button [2.0]. -->
<!-- Formatting targets are replaced with user configs by Py build script. -->
<!-- All inline, to avoid extra requirements for custom HEADER.html files, -->
<!-- (though browsers allow <style> blocks in <body>, as does HTML 5.2+). -->
<!-- Top goes to page top only: use custom headers or edit this for other. -->
<!-- Clients using a custom FOOTER.html may also need something like this:
.finalelement { /* add extra space above Top's bottom at end of page */
margin-bottom: 80px; /* else, text at end may be overlayed and unviewable */
}
<P class=finalelement> <==on the last content line or item (or <div>+padding, <br>)
-->
</P>
<button onclick="topClick();"
id="topBtn"
title="Go to index"
style="
display: none; /* initially HIDDEN (changed on scroll iff JS) */
position: fixed; /* float/persist */
bottom: 36px; /* e.g., above site toolbar */
right: 8px; /* left of scroll area */
z-index: 99; /* covering priority */
font-size: 15px;
border: none;
outline: none;
cursor: pointer; /* change on mouse-over */
padding: 10px;
border-radius: 4px; /* rounded corners */
color: white; /* foreground (text) color, default=white */
background-color: #999; /* background color, default=grey */
">Top</button>
<!-- Set up click/scroll callbacks iff JS is enabled -->
<script>
// Get and save the button in global (window) scope
var topButton = document.getElementById("topBtn"); // i.e., "Top" above
// Set the default scroll constant: global so pages can change if needed
var topButtonShowAt = 500; // px from top, show Top below this cutoff
function topClick() {
//
// Go to the top of page (but keep prior location in history for back).
// Clear hover shading (else recessed color gets stuck on mobile)?
// No: unhover doesn't work as tried for main site - punt on shading.
//
window.location.href = '#'; // go/scroll to top (no tag)
//topButton.style.backgroundColor = '#999'; // no: unhover for mobile?
}
function scrollFunction() {
//
// Adapted from web examples; the odd || test is for browser interoperability:
// see, for instance, https://dev.opera.com/articles/fixing-the-scrolltop-bug/.
//
// Clients can reset global topButtonShowAt for larger preambles; else Top
// may appear above/before an actual #top tag if it's not top of page #.
//
var showat = topButtonShowAt; // local
// N pixels from the top after scroll?
if (document.body.scrollTop > showat || document.documentElement.scrollTop > showat) {
topButton.style.display = "block"; // show Top
} else {
topButton.style.display = "none"; // hide Top
}
}
// Show/hide button whenever user scrolls below/above N px from top
window.onscroll = scrollFunction; // source had "function() {scrollFunction()};"; why?
</script>
<!-- ======================================================================= -->
<!-- END FLOATING TOP -->
<!-- ======================================================================= -->
<!-- ======================================================================= -->
<!-- START THUMBS TABLE -->
<!-- ======================================================================= -->
<p>
<div style="overflow-x: auto;">
<table style=" /* not used: table-layout:fixed; */
background-color: #123456; /* for fun (former 'white') */
width: 100%; /* expand table+borderlines */
margin-top: 8px; margin-bottom: 8px; /* above/below borderlines; 5=>8px [2.3] */
padding-top: 25px; padding-bottom: 5px; /* under/over borderlines */
border: 1px solid black; /* manual lines, _not_ <hr>s: [2.2] */
border-radius: 6px; /* chrome botches <hr> at zoom <= 90% [2.2] */
">
<tr>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/0-desktop-mac-chrome.png.html">
<img src="_thumbspage/0-desktop-mac-chrome.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">0-desktop-mac-chrome.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/1-desktop-small.png.html">
<img src="_thumbspage/1-desktop-small.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">1-desktop-small.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/2-android-6.2in-chrome.png.html">
<img src="_thumbspage/2-android-6.2in-chrome.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">2-android-6.2in-chrome.png</p>
</td>
</tr>
<tr>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/3-android-nonav.png.html">
<img src="_thumbspage/3-android-nonav.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">3-android-nonav.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/4-android-landscape.png.html">
<img src="_thumbspage/4-android-landscape.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">4-android-landscape.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/5-android-blog.png.html">
<img src="_thumbspage/5-android-blog.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">5-android-blog.png</p>
</td>
</tr>
<tr>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/6-android-addrbar.png.html">
<img src="_thumbspage/6-android-addrbar.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">6-android-addrbar.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/7-android-teachpy.png.html">
<img src="_thumbspage/7-android-teachpy.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">7-android-teachpy.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/8-ios-4in-safari.PNG.html">
<img src="_thumbspage/8-ios-4in-safari.PNG" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">8-ios-4in-safari.PNG</p>
</td>
</tr>
<tr>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/9-ios-landscape.PNG.html">
<img src="_thumbspage/9-ios-landscape.PNG" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">9-ios-landscape.PNG</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/A-mergeall-userguide.png.html">
<img src="_thumbspage/A-mergeall-userguide.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">A-mergeall-userguide.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/B-mergeall-landscape.png.html">
<img src="_thumbspage/B-mergeall-landscape.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">B-mergeall-landscape.png</p>
</td>
</tr>
<tr>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/C-pyedit-userguide.png.html">
<img src="_thumbspage/C-pyedit-userguide.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">C-pyedit-userguide.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/D-pyedit-landscape.png.html">
<img src="_thumbspage/D-pyedit-landscape.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">D-pyedit-landscape.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/E-trnpix-view-mobile.png.html">
<img src="_thumbspage/E-trnpix-view-mobile.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">E-trnpix-view-mobile.png</p>
</td>
</tr>
<tr>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/F-more-about-lp.png.html">
<img src="_thumbspage/F-more-about-lp.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">F-more-about-lp.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/G-more-about-py.png.html">
<img src="_thumbspage/G-more-about-py.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">G-more-about-py.png</p>
</td>
<td style="text-align: center; width: 33%; padding: 4px; color: white;">
<A href="_thumbspage/H-more-about-tp.png.html">
<img src="_thumbspage/H-more-about-tp.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A>
<p style="white-space: nowrap; margin-top: 0px;">H-more-about-tp.png</p>
</td>
</tr>
</table></div></p>
<!-- ======================================================================= -->
<!-- END THUMBS TABLE -->
<!-- ======================================================================= -->
<!-- Generated 2022-05-09 @16:04:46, by thumbspage 2.3: learning-python.com/thumbspage.html -->
<!-- ======================================================================= -->
<!-- START DEFAULT FOOTER -->
<!-- ======================================================================= -->
<p style="margin-bottom: 80px;"><i>Gallery built by <A HREF="https://learning-python.com/thumbspage.html">thumbspage.py</A></i></p>
</body></html>