按屏幕大小缩放文本标签

时间:2021-08-09 21:44:57

Is there a way to scale text so that it takes up close to the same screen real estate no matter what the device size is? I've found that the text on an iPad sized device is too small in relation to the screen size when compared to the iPhone. Below is an example of what I'm looking for. Notice the text percentage size is similar in relation to the device screen size.

是否有一种方法可以缩放文本,使其在无论设备大小如何的情况下都能接近相同的屏幕空间?我发现,与iPhone相比,iPad大小的手机上的文字与屏幕尺寸的关系太小了。下面是我正在寻找的一个例子。注意,文本百分比大小与设备屏幕大小相似。

Example

按屏幕大小缩放文本标签按屏幕大小缩放文本标签

5 个解决方案

#1


23  

To set constraints on the label that you have, see this link: How do you make a background image scale to screen size in swift? . I know that you might not be using Swift (I'm using Objective-C), but the first answer shows how to do it in the storyboard. Do the same thing it says, but for the label. Then, see the image below to change the auto shrink options for the label from "Fixed Font Size" to "Minimum Font Scale" (see image below). Hope this helps!

要设置标签上的约束,请参见这个链接:如何使用swift将背景图像缩放到屏幕大小?。我知道您可能没有使用Swift(我使用的是Objective-C),但是第一个答案显示了如何在故事板中使用它。做同样的事情,它说,但为标签。然后,查看下图,将标签的自动收缩选项从“固定字体大小”更改为“最小字体大小”(见下图)。希望这可以帮助!

按屏幕大小缩放文本标签

#2


6  

I had my own fix and it's not one click, but I found it well worth it.

我有我自己的修复,它不是一次点击,但我发现它很值得。

Step 1:

Test some font sizes for different screen sizes, recording the font size and the most relevant other dimension.

测试不同屏幕大小的字体大小,记录字体大小和最相关的其他维度。

Here's what I mean...

这就是我的意思是……

I'd start with a normal iPad Screen and select a font size that worked.

我将从一个普通的iPad屏幕开始,选择一个适用的字体大小。

按屏幕大小缩放文本标签

Since I knew the entire height of the screen would determine what makes a font size comfortable or not, I'd record the font size along with the entire screen height.

因为我知道整个屏幕的高度将决定字体大小是否合适,所以我会记录字体大小和整个屏幕高度。

按屏幕大小缩放文本标签

So the font size was 50 with a height of 1024.

字体大小是50,高度是1024。

Then, I switched to the iPhone SE

然后,我切换到iPhone SE

按屏幕大小缩放文本标签 按屏幕大小缩放文本标签

This was pretty atrocious, so I fixed the font size:

这太残忍了,所以我固定字体大小:

按屏幕大小缩放文本标签

After recording that the font size worked at 25 with a height of 568.

记录后,字体大小在25处,高度为568。

Step 2:

Bust out the calculator app and find a constant that relates the font sizes to the heights (in my case), giving or taking a bit.

打开计算器应用程序,找到一个常数,把字体大小和高度联系起来(在我的例子中),给出或取一点。

Here's what I mean:

我的意思:

I knew 50 works with 1024 and that 25 works with 568.

我知道50个用1024,25个用568。

Dividing 50/1024 gives you .048828125.

除以50/1024得到0。048828125。

Multiplying that by 568 equals 27.734375, which would be a little fat of a font size for the SE.

乘以568等于27.734375,这是SE字体大小的一小块。

Repeating that process but using the SE's values to do the division produced .0440140845, and checking that with the iPad's height produces a font size of 45, just a bit small for the mighty iPad screen.

重复这个过程,但是使用SE的值来划分产生了。0440140845,检查一下iPad的高度,就会产生45的字体大小,对于强大的iPad屏幕来说,只有一点小。

So I split the quotients down the middle, resulting in a number around 0.46.

所以我把商式分成中间,结果是0。46左右。

Step 3:

Connect the labels and change their font sizes programmatically using this number.

连接标签并通过编程方式更改字体大小。

First, drag the labels into an outlet collection. I named my connection 'headerLabels' since they're all at the top of the screen.

首先,将标签拖到outlet集合中。我将我的连接命名为“headerlabel”,因为它们都在屏幕的顶部。

按屏幕大小缩放文本标签

Then, you can kinda steal my code, but just don't make too much money with it ;)

然后,你可以偷我的代码,但是不要用它赚太多钱;

// Outlet collection of labels
@IBOutlet var headerLabels: [UILabel]!

// Who needs a short variable name when we can have a 
// painfully lengthy one to describe the number we calculated?
let relativeFontConstant:CGFloat = 0.046

override func viewDidLoad() {
    super.viewDidLoad()

    // Should be in the viewDidLoad so it can load the same time as
    // the view does.

    // apply a font size to all the labels.
    for label in headerLabels {
        // multiply the height we based it on of the entire view 
        // to the number we calculated
        label.font = label.font.withSize(self.view.frame.height * relativeFontConstant)
    }
}

If you've got any questions, comments, compliments, or insults let me know :)

如果你有任何问题、评论、赞美或侮辱,请告诉我:

#3


3  

I was having the same issue where I needed the text to be scaled proportionally along with the screen size increase.

我遇到了同样的问题,我需要文本随着屏幕尺寸的增大而按比例缩放。

Adaptive sizing is quite limited as you can only set the font sizing for size classes. Having the font sizes for two width options, compact and regular was not a solution for me.

自适应大小调整非常有限,因为您只能为大小类设置字体大小。拥有两个宽度选项的字体大小,紧凑和常规对我来说不是一个解决方案。

I have written a small lib which handles automatic font scaling for UILabel and UITextView for different screen sizes.

我编写了一个小库,用于处理UILabel和UITextView在不同屏幕大小下的自动字体缩放。

You can set the scaling globally or for a specific instance of UILabel and UITextView.

您可以全局设置缩放比例,或者为特定的UILabel和UITextView实例设置缩放比例。

Find it here: AMXFontAutoScale

在这里找到:AMXFontAutoScale

#4


1  

There is an aspect ratio constraint available. Add this to your label. Constraints to left and top margins for anchoring the label in place should silence the compiler warnings.

有一个纵横比约束可用。把它添加到标签中。对左和顶部边缘的锚定标签的限制应该使编译器的警告保持沉默。

As @VatsalManot mentioned, learn adaptive sizing for starters. Here's a good link:

正如@VatsalManot所提到的,为初学者学习适应规模。这里有一个很好的链接:

http://www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial

http://www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial

Hope this helps! :)

希望这可以帮助!:)

#5


1  

1. Select your label and open attribute inspector for it 按屏幕大小缩放文本标签

1。为它选择标签和打开属性检查器

2. Click on + sign by Font, select width and height as "Regular", click Add Variation 按屏幕大小缩放文本标签

2。点击+按字体签名,选择宽度和高度为“常规”,点击添加变化

3. Another Font field will appear, this will represent font for ipad/big screen/ illusion of big screen (scroll view)

3所示。另一个字体字段将出现,这将表示ipad的字体/大屏幕/大屏幕的错觉(滚动视图)

按屏幕大小缩放文本标签

4. Select your desired font for ipad

4所示。选择你想要的ipad字体

按屏幕大小缩放文本标签

#1


23  

To set constraints on the label that you have, see this link: How do you make a background image scale to screen size in swift? . I know that you might not be using Swift (I'm using Objective-C), but the first answer shows how to do it in the storyboard. Do the same thing it says, but for the label. Then, see the image below to change the auto shrink options for the label from "Fixed Font Size" to "Minimum Font Scale" (see image below). Hope this helps!

要设置标签上的约束,请参见这个链接:如何使用swift将背景图像缩放到屏幕大小?。我知道您可能没有使用Swift(我使用的是Objective-C),但是第一个答案显示了如何在故事板中使用它。做同样的事情,它说,但为标签。然后,查看下图,将标签的自动收缩选项从“固定字体大小”更改为“最小字体大小”(见下图)。希望这可以帮助!

按屏幕大小缩放文本标签

#2


6  

I had my own fix and it's not one click, but I found it well worth it.

我有我自己的修复,它不是一次点击,但我发现它很值得。

Step 1:

Test some font sizes for different screen sizes, recording the font size and the most relevant other dimension.

测试不同屏幕大小的字体大小,记录字体大小和最相关的其他维度。

Here's what I mean...

这就是我的意思是……

I'd start with a normal iPad Screen and select a font size that worked.

我将从一个普通的iPad屏幕开始,选择一个适用的字体大小。

按屏幕大小缩放文本标签

Since I knew the entire height of the screen would determine what makes a font size comfortable or not, I'd record the font size along with the entire screen height.

因为我知道整个屏幕的高度将决定字体大小是否合适,所以我会记录字体大小和整个屏幕高度。

按屏幕大小缩放文本标签

So the font size was 50 with a height of 1024.

字体大小是50,高度是1024。

Then, I switched to the iPhone SE

然后,我切换到iPhone SE

按屏幕大小缩放文本标签 按屏幕大小缩放文本标签

This was pretty atrocious, so I fixed the font size:

这太残忍了,所以我固定字体大小:

按屏幕大小缩放文本标签

After recording that the font size worked at 25 with a height of 568.

记录后,字体大小在25处,高度为568。

Step 2:

Bust out the calculator app and find a constant that relates the font sizes to the heights (in my case), giving or taking a bit.

打开计算器应用程序,找到一个常数,把字体大小和高度联系起来(在我的例子中),给出或取一点。

Here's what I mean:

我的意思:

I knew 50 works with 1024 and that 25 works with 568.

我知道50个用1024,25个用568。

Dividing 50/1024 gives you .048828125.

除以50/1024得到0。048828125。

Multiplying that by 568 equals 27.734375, which would be a little fat of a font size for the SE.

乘以568等于27.734375,这是SE字体大小的一小块。

Repeating that process but using the SE's values to do the division produced .0440140845, and checking that with the iPad's height produces a font size of 45, just a bit small for the mighty iPad screen.

重复这个过程,但是使用SE的值来划分产生了。0440140845,检查一下iPad的高度,就会产生45的字体大小,对于强大的iPad屏幕来说,只有一点小。

So I split the quotients down the middle, resulting in a number around 0.46.

所以我把商式分成中间,结果是0。46左右。

Step 3:

Connect the labels and change their font sizes programmatically using this number.

连接标签并通过编程方式更改字体大小。

First, drag the labels into an outlet collection. I named my connection 'headerLabels' since they're all at the top of the screen.

首先,将标签拖到outlet集合中。我将我的连接命名为“headerlabel”,因为它们都在屏幕的顶部。

按屏幕大小缩放文本标签

Then, you can kinda steal my code, but just don't make too much money with it ;)

然后,你可以偷我的代码,但是不要用它赚太多钱;

// Outlet collection of labels
@IBOutlet var headerLabels: [UILabel]!

// Who needs a short variable name when we can have a 
// painfully lengthy one to describe the number we calculated?
let relativeFontConstant:CGFloat = 0.046

override func viewDidLoad() {
    super.viewDidLoad()

    // Should be in the viewDidLoad so it can load the same time as
    // the view does.

    // apply a font size to all the labels.
    for label in headerLabels {
        // multiply the height we based it on of the entire view 
        // to the number we calculated
        label.font = label.font.withSize(self.view.frame.height * relativeFontConstant)
    }
}

If you've got any questions, comments, compliments, or insults let me know :)

如果你有任何问题、评论、赞美或侮辱,请告诉我:

#3


3  

I was having the same issue where I needed the text to be scaled proportionally along with the screen size increase.

我遇到了同样的问题,我需要文本随着屏幕尺寸的增大而按比例缩放。

Adaptive sizing is quite limited as you can only set the font sizing for size classes. Having the font sizes for two width options, compact and regular was not a solution for me.

自适应大小调整非常有限,因为您只能为大小类设置字体大小。拥有两个宽度选项的字体大小,紧凑和常规对我来说不是一个解决方案。

I have written a small lib which handles automatic font scaling for UILabel and UITextView for different screen sizes.

我编写了一个小库,用于处理UILabel和UITextView在不同屏幕大小下的自动字体缩放。

You can set the scaling globally or for a specific instance of UILabel and UITextView.

您可以全局设置缩放比例,或者为特定的UILabel和UITextView实例设置缩放比例。

Find it here: AMXFontAutoScale

在这里找到:AMXFontAutoScale

#4


1  

There is an aspect ratio constraint available. Add this to your label. Constraints to left and top margins for anchoring the label in place should silence the compiler warnings.

有一个纵横比约束可用。把它添加到标签中。对左和顶部边缘的锚定标签的限制应该使编译器的警告保持沉默。

As @VatsalManot mentioned, learn adaptive sizing for starters. Here's a good link:

正如@VatsalManot所提到的,为初学者学习适应规模。这里有一个很好的链接:

http://www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial

http://www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial

Hope this helps! :)

希望这可以帮助!:)

#5


1  

1. Select your label and open attribute inspector for it 按屏幕大小缩放文本标签

1。为它选择标签和打开属性检查器

2. Click on + sign by Font, select width and height as "Regular", click Add Variation 按屏幕大小缩放文本标签

2。点击+按字体签名,选择宽度和高度为“常规”,点击添加变化

3. Another Font field will appear, this will represent font for ipad/big screen/ illusion of big screen (scroll view)

3所示。另一个字体字段将出现,这将表示ipad的字体/大屏幕/大屏幕的错觉(滚动视图)

按屏幕大小缩放文本标签

4. Select your desired font for ipad

4所示。选择你想要的ipad字体

按屏幕大小缩放文本标签