I’m creating a very simple flexible width one column website, that has to work on phones.
I don’t really know what to set the viewport width as? But I’ve tried device-width and automatic (same as the Backdraft template) and something odd happens:
When looking at the site on a phone, the text size is different in landscape vs portrait.
Surely the point of a flexible width responsive website is that the text size stays the same, with the width varying.
For example, Caleb Gove’s fantastic Backdraft templete, when viewed in landscape on a phone - the text is a lot bigger than in portrait.
What I want to achieve is http://ia.net/ with the text staying the same size.
Looks like you solved this by setting both minimum and maximum scale to 100% (which will turn scaling off). You can also do and keep scaling by setting Initial Scale to 100% and leaving min and max at their default values.
This also helps in cases when an orientation change scales the page and repositions it.
Hope this helps,
Joe
On 11 Sep 2013, at 11:37, Mark email@hidden wrote:
I’m creating a very simple flexible width one column website, that has to work on phones.
I don’t really know what to set the viewport width as? But I’ve tried device-width and automatic (same as the Backdraft template) and something odd happens:
When looking at the site on a phone, the text size is different in landscape vs portrait.
Surely the point of a flexible width responsive website is that the text size stays the same, with the width varying.
For example, Caleb Gove’s fantastic Backdraft templete, when viewed in landscape on a phone - the text is a lot bigger than in portrait.
What I want to achieve is http://ia.net/ with the text staying the same size.
I think I am right in saying that the minimum and maximum scale only controls the amount the user can pinch/zoom in or out on a touch pad device.
This has nothing to do with viewport or the effect that I am seeing on my iPhone where text size increases when viewed in landscape orientation compared to portrait.
I think I’ve solved the issue by making my text styles
-webkit-text-size-adjust:none
I understand from a previous post that iOS devices scale text (to make small text is more legible). Not sure why it would scale text up in landscape orientation and not portrait.
I’ve removed the iOS text scaling over-ride from my text styles (-webkit-text-size-adjust:none) and set viewport to none (I’m building a flexible width site and don’t want any scaling) and set initial scale to 100%.
This has stopped the text from changing size depending on orientation.
This is great, but I don’t understand what is going on.
Because the number of words in a line of text are a major driver of reading efficiency. When you lengthen a line of text (physically lengthen it, that is) without also adjusting the leading and/or font size, you end up with a lot more words on a line than can be comfortably read. The eye frequently gets lost on the return trip to the next line, and reading speed and comprehension plummet.
Walter
On Sep 11, 2013, at 9:31 AM, Mark wrote:
Not sure why it would scale text up in landscape orientation and not portrait.
with regard to ipad orientation - in one direction, 100% = 768 pixels. In
the other, 100% = 1024 pixels.
–
Ernie Simpson
On Wed, Sep 11, 2013 at 9:42 AM, Walter Lee Davis email@hiddenwrote:
Because the number of words in a line of text are a major driver of
reading efficiency. When you lengthen a line of text (physically lengthen
it, that is) without also adjusting the leading and/or font size, you end
up with a lot more words on a line than can be comfortably read. The eye
frequently gets lost on the return trip to the next line, and reading speed
and comprehension plummet.
Walter
On Sep 11, 2013, at 9:31 AM, Mark wrote:
Not sure why it would scale text up in landscape orientation and not
portrait.
Because it’s the initial scale that drives it. If the initial scale is automatic (default) then it will do the math and try to adjust the font. This is a highly-variable thing, I haven’t quite figured out all of the drivers. I have often seen different items in a single unordered list get different amounts of scaling, and that just baffles me.
Walter
On Sep 11, 2013, at 9:48 AM, Mark wrote:
So this is why iOS increases the size of text when in landscape orientation?
Why does setting viewport to none and initial scale to 100% over-ride this scaling of text?
it’s harder to deconstruct what iOS Safari is doing than OSX Safari - I
suspect the iOS version is following a different set of rules. How I often
wish for iOS Safari developer tools.
–
Ernie Simpson
On Wed, Sep 11, 2013 at 9:51 AM, Walter Lee Davis email@hiddenwrote:
Because it’s the initial scale that drives it. If the initial scale is
automatic (default) then it will do the math and try to adjust the font.
This is a highly-variable thing, I haven’t quite figured out all of the
drivers. I have often seen different items in a single unordered list get
different amounts of scaling, and that just baffles me.
OK. So by setting initial scale to 100%, I’m telling all browsers using Webkit that they can’t scale the text.
A slightly different question, my flexible width website - should viewport be ‘none’ - the width of my page and layout is flexible, I don’t want any scaling to happen.
There is a remote debugger, works for JavaScript but I haven’t tried it with CSS yet. That’s an interesting idea for a bit of free time.
Walter
On Sep 11, 2013, at 9:58 AM, Ernie Simpson wrote:
it’s harder to deconstruct what iOS Safari is doing than OSX Safari - I
suspect the iOS version is following a different set of rules. How I often
wish for iOS Safari developer tools.
–
Ernie Simpson
On Wed, Sep 11, 2013 at 9:51 AM, Walter Lee Davis email@hiddenwrote:
Because it’s the initial scale that drives it. If the initial scale is
automatic (default) then it will do the math and try to adjust the font.
This is a highly-variable thing, I haven’t quite figured out all of the
drivers. I have often seen different items in a single unordered list get
different amounts of scaling, and that just baffles me.
You need to set the viewport to device-width if you want any of your responsive stuff to do anything at all.
Walter
On Sep 11, 2013, at 9:58 AM, Mark wrote:
OK. So by setting initial scale to 100%, I’m telling all browsers using Webkit that they can’t scale the text.
A slightly different question, my flexible width website - should viewport be ‘none’ - the width of my page and layout is flexible, I don’t want any scaling to happen.
On 11 Sep 2013, at 14:58, Mark email@hidden wrote:
OK. So by setting initial scale to 100%, I’m telling all browsers using Webkit that they can’t scale the text.
By setting initial scale you’re saying that you don’t want the page to be scaled when it’s first opened. To prevent scaling (which doesn’t preclude you from having a flexible site – try scaling the iA site you sent in your original post) you need to either turn off “Page can be Scaled”, or change the minimum scale and maximum scale to 100%.
A slightly different question, my flexible width website - should viewport be ‘none’ - the width of my page and layout is flexible, I don’t want any scaling to happen.
The height should almost certainly be set to None but the width should be set to Device Width.
Hi Ernie,
On 11 Sep 2013, at 14:58, Ernie Simpson email@hidden wrote:
How I often wish for iOS Safari developer tools.
If you open the page using the iOS simulator (or an iOS 6+ device that’s plugged into your Mac), and go to the Develop menu in Safari (10.8+), you’ll be able to bring up the Inspector for the page you’re looking at. Oh, there’s also a setting you need to change in the Safari settings for the iOS device: Settings>Safari>Advanced>Web Inspector.
I just had another look at your file. There’s a paragraph containing a non-breaking space in your page that seems to be causing the text size increase (can’t explain why at the moment). I’ve uploaded two versions of your page to my user space. They both have the paragraph containing the non-breaking space removed and don’t use the text-size-adjust: none property. This one has initial-scale set to 100%:
Note that they’re using the images and stylesheets from your server, so if they are changed or removed from there then they may differ from what we’re seeing now.
Joe
On 11 Sep 2013, at 15:46, Mark email@hidden wrote:
Setting initial scale to 100% has no effect on the increase in text size on an iPhone when held in landscape orientation.
Only applying -webkit-text-size-adjust:none stops webkit browsers from increasing the size of text when viewed in landscape.
it’s harder to deconstruct what iOS Safari is doing than OSX Safari - I suspect the iOS version is following a different set of rules. How I often wish for iOS Safari developer tools.
If you have the iOS simulator installed, you have access to the same developer tools as OS X Safari. Simply open the website in the iOS simulator, launch Safari for OS X, and in the developer menu choose the page under “iOS Simulator”
On Wed, Sep 11, 2013 at 6:32 PM, Caleb Grove email@hidden wrote:
Don’t have time to loiter, but saw this:
it’s harder to deconstruct what iOS Safari is doing than OSX Safari - I
suspect the iOS version is following a different set of rules. How I often
wish for iOS Safari developer tools.
If you have the iOS simulator installed, you have access to the same
developer tools as OS X Safari. Simply open the website in the iOS
simulator, launch Safari for OS X, and in the developer menu choose the
page under “iOS Simulator”
