• We've upgraded our forums. Please post any issues/requests in this thread.

Trouble making a web app mobile-ready

FordGT90Concept

"I go fast!1!11!1!"
Joined
Oct 13, 2008
Messages
20,902 (6.25/day)
Likes
9,994
Location
IA, USA
System Name BY-2015
Processor Intel Core i7-6700K (4 x 4.00 GHz) w/ HT and Turbo on
Motherboard MSI Z170A GAMING M7
Cooling Scythe Kotetsu
Memory 2 x Kingston HyperX DDR4-2133 8 GiB
Video Card(s) PowerColor PCS+ 390 8 GiB DVI + HDMI
Storage Crucial MX300 275 GB, Seagate 6 TB 7200 RPM
Display(s) Samsung SyncMaster T240 24" LCD (1920x1200 HDMI) + Samsung SyncMaster 906BW 19" LCD (1440x900 DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay
Audio Device(s) Realtek Onboard, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse SteelSeries Sensei RAW
Keyboard Tesoro Excalibur
Software Windows 10 Pro 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
#1
Joined
Feb 8, 2012
Messages
2,678 (1.26/day)
Likes
1,914
Location
Zagreb, Croatia
System Name Windows 7 64-bit Core i5 3570K
Processor Intel Core i5 3570K @ 4.2 GHz, 1.26 V
Motherboard Gigabyte GA-Z77MX-D3H
Cooling Scythe Katana 4
Memory 4 x 4 GB G-Skill Sniper DDR3 @ 1600 MHz
Video Card(s) Gainward NVIDIA GeForce GTX 970 Phantom
Storage Western Digital Caviar Blue 1 TB, Seagate Baracuda 1 TB
Display(s) Dell P2414H
Case CoolerMaster Silencio 550
Audio Device(s) VIA HD Audio
Power Supply Corsair TX v2 650W
Mouse Steelseries Sensei
Keyboard CM Storm Quickfire Pro, Cherry MX Reds
Software MS Windows 7 Enterprise 64-bit SP1

FordGT90Concept

"I go fast!1!11!1!"
Joined
Oct 13, 2008
Messages
20,902 (6.25/day)
Likes
9,994
Location
IA, USA
System Name BY-2015
Processor Intel Core i7-6700K (4 x 4.00 GHz) w/ HT and Turbo on
Motherboard MSI Z170A GAMING M7
Cooling Scythe Kotetsu
Memory 2 x Kingston HyperX DDR4-2133 8 GiB
Video Card(s) PowerColor PCS+ 390 8 GiB DVI + HDMI
Storage Crucial MX300 275 GB, Seagate 6 TB 7200 RPM
Display(s) Samsung SyncMaster T240 24" LCD (1920x1200 HDMI) + Samsung SyncMaster 906BW 19" LCD (1440x900 DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay
Audio Device(s) Realtek Onboard, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse SteelSeries Sensei RAW
Keyboard Tesoro Excalibur
Software Windows 10 Pro 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
#3
Code:
<meta name="viewport" content="width=device-width" />
Seemed to help a lot but it can be even better.
 

FordGT90Concept

"I go fast!1!11!1!"
Joined
Oct 13, 2008
Messages
20,902 (6.25/day)
Likes
9,994
Location
IA, USA
System Name BY-2015
Processor Intel Core i7-6700K (4 x 4.00 GHz) w/ HT and Turbo on
Motherboard MSI Z170A GAMING M7
Cooling Scythe Kotetsu
Memory 2 x Kingston HyperX DDR4-2133 8 GiB
Video Card(s) PowerColor PCS+ 390 8 GiB DVI + HDMI
Storage Crucial MX300 275 GB, Seagate 6 TB 7200 RPM
Display(s) Samsung SyncMaster T240 24" LCD (1920x1200 HDMI) + Samsung SyncMaster 906BW 19" LCD (1440x900 DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay
Audio Device(s) Realtek Onboard, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse SteelSeries Sensei RAW
Keyboard Tesoro Excalibur
Software Windows 10 Pro 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
#4
I got it figured out using this:
http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx

Apparently the minimum the WP7 browser supports is 320 pixels wide. My form was at about 200 pixels. I increased the fonts and size of input boxes to fill the 320 space in addition to the viewport command to make it work.


Edit: With the viewport in, it wouldn't scale to the horizontal size so I removed it. Now, all it has is:
Code:
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
It appears to be working as expected in vertical and horizontal modes. :D
 
Joined
Feb 8, 2012
Messages
2,678 (1.26/day)
Likes
1,914
Location
Zagreb, Croatia
System Name Windows 7 64-bit Core i5 3570K
Processor Intel Core i5 3570K @ 4.2 GHz, 1.26 V
Motherboard Gigabyte GA-Z77MX-D3H
Cooling Scythe Katana 4
Memory 4 x 4 GB G-Skill Sniper DDR3 @ 1600 MHz
Video Card(s) Gainward NVIDIA GeForce GTX 970 Phantom
Storage Western Digital Caviar Blue 1 TB, Seagate Baracuda 1 TB
Display(s) Dell P2414H
Case CoolerMaster Silencio 550
Audio Device(s) VIA HD Audio
Power Supply Corsair TX v2 650W
Mouse Steelseries Sensei
Keyboard CM Storm Quickfire Pro, Cherry MX Reds
Software MS Windows 7 Enterprise 64-bit SP1
#5
Nice :toast: you can even handle different screen sizes with completely different *.css files using media query :

HTML:
<link media="only screen and (min-device-width: 0px) and (max-device-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />

<link media="only screen and (min-device-width: 801px) and (max-device-width:9999px)" href="regular.css" type="text/css" rel="stylesheet" />
 

FordGT90Concept

"I go fast!1!11!1!"
Joined
Oct 13, 2008
Messages
20,902 (6.25/day)
Likes
9,994
Location
IA, USA
System Name BY-2015
Processor Intel Core i7-6700K (4 x 4.00 GHz) w/ HT and Turbo on
Motherboard MSI Z170A GAMING M7
Cooling Scythe Kotetsu
Memory 2 x Kingston HyperX DDR4-2133 8 GiB
Video Card(s) PowerColor PCS+ 390 8 GiB DVI + HDMI
Storage Crucial MX300 275 GB, Seagate 6 TB 7200 RPM
Display(s) Samsung SyncMaster T240 24" LCD (1920x1200 HDMI) + Samsung SyncMaster 906BW 19" LCD (1440x900 DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay
Audio Device(s) Realtek Onboard, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse SteelSeries Sensei RAW
Keyboard Tesoro Excalibur
Software Windows 10 Pro 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
#6
Friend of mine tells me it doesn't look very good on iPhone so my fixes only apply to Windows Phone. MobileOptimized is apparently an IE only thing.


The problem with viewport is that width doesn't take into account horizontal and vertical renders. Chrome and Safari use horizontal-scale and vertical-scale to account for that whereas IE doesn't have those and instead uses the MobileOptimized parameter where it automatically calculates the scale for both perspectives. IMO, Microsoft has it right. Apple/Google/Mozilla should adapt MobileOptimized and abandon viewport.
 
Last edited: