Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.infosystems.www.authoring.html,comp.infosystems.www.authoring.stylesheets,comp.lang.javascript
Subject: Re: Change UI layout
Followup-To: comp.infosystems.www.authoring.html
Date: Thu, 03 Jul 2014 10:38:21 +0200
Organization: PointedEars Software (PES)
Lines: 52
Message-ID: <1851843.LhWb2JNgvM@PointedEars.de>
References: <d4adnY1xv_wzBi7OnZ2dnUVZ_sqdnZ2d@westnet.com.au> <RD-PE-20140702080218@ram.dialup.fu-berlin.de> <lp0egh$jhi$1@dont-email.me> <Ia-dnViIJrTLlCnOnZ2dnUVZ_tidnZ2d@westnet.com.au> <6661908.BVoKEv2Ayq@PointedEars.de> <DPednQYpBcKxKSnOnZ2dnUVZ_sudnZ2d@westnet.com.au> <DPI-20140703035451@ram.dialup.fu-berlin.de> <QKCdne4mnaDKQCnOnZ2dnUVZ_qGdnZ2d@westnet.com.au>
Reply-To: Thomas 'PointedEars' Lahn <dciwam@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1404376704 27198 eJwFwYEBwCAIA7CXLKMdnCMi/59gwk/Q+V2Uczhhfd2rYjZgk6qAWI3Ku7Q2mp4p8pofRD8dMxDV (3 Jul 2014 08:38:24 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Thu, 3 Jul 2014 08:38:24 +0000 (UTC)
User-Agent: KNode/4.12.4
X-User-ID: eJwNyMkBwCAIBMCWQC4px1W2/xKSeU5Yat7yjPRgEIuD+CtNe6YhJTx7gvUUvXnNMbD9zgFrvSqTO+kKbRF8dwkWTQ==
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Cancel-Lock: sha1:coUX5V2EtJhoKule9mtK367OjTk=
X-NNTP-Posting-Host: eJwFwYEBwDAEBMCVfPEYRyT2H6F3rgQnjE7z9U00thSeJs0qF8i5tjHvfSUacoOnlTMoe/kDBBMQdA==
Xref: csiph.com comp.infosystems.www.authoring.html:5108 comp.infosystems.www.authoring.stylesheets:5383 comp.lang.javascript:25196

[X-Post ciwa.html, ciwa.stylesheets, comp.lang.javascript;
 F'up2 comp.infosystems.www.authoring.html]

Andrew Poulos wrote in <news:comp.infosystems.www.authoring.stylesheets>:

> So I'd hoave to get the DPI and then the screen size to work out the
> physical size of the screen to decide whether that's "small" and then
> change the page's styles accordingly.

Maybe the best solution is neither HTTP, nor CSS or scripting.  I thought 
that it would suffice to set “max-width” or “width” CSS properties, and I 
found older recommendations for @viewport rules on the Web.

But what really worked for me is this “meta” element I found when I emulated 
“HTC Sensation, Evo 3D” (since I own an HTC Sensation) in Chromium 34 on 
<https://twitter.com/>, which redirected me to <http://mobile.twitter.com/>:

<meta name="viewport" id="viewport" content="width=device-width, initial-
scale=1.0, maximum-scale=1.0, user-scalable=0">

In particular

<meta name="viewport" content="width=device-width, initial-scale=1.0">

appears to be working fine for the language selection on my Web site, 
<http://PointedEars.de/>. (I still have to do something about the background 
when content is zoomed, though.)

It would appear that non-mobile browsers ignore this element, so you can 
always include it, and you may not need an extra mobile version in simple 
cases like this.

(It did not work so well for “Home” because it prevented the horizontally 
arranged "links", that I put there particularly for mobile “Features”, from 
being accessible.  And fixed widths like “540px”, unstead of “device-width”, 
prevent the zoom in the built-in Android browser.  So I am not using it 
there for the time being.  Also, setting the viewport width this way may 
trigger @media queries for the screen unintentionally; that happened to me 
as well.)
 
> Then I'd need a bunch of different devices to test on which given
>    <http://cartoonized.net/cellphone-screen-resolution.php>
> will not be easy or even possible.

Please do not play stupid.

<http://www.catb.org/~esr/faqs/smart-questions.html#intro>


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).