Meaning of iPadOS Widget Targets (Canvas, Device)?

Question

I‘m trying to get the iOS and iPadOS widget sizes (small, medium and large) depending on the current UIScreen.main.bounds.size by using switch statements.

Everything works like expected, but I don’t quite get which widget size is correct when running iPadOS.

The following table assigns each screen size to its widget size: iPadOS widget design comprehensives

Website: https://developer.apple.com/design/human-interface-guidelines/components/system-experiences/widgets/#Resources

There are two different targets (Canvas and Device). Which of these two do I need to get the correct widget sizes or what‘s the difference between them?

To better understand what i want to do with it:

struct widget { 
        var smallWidget = CGSize()
        var mediumWidget = CGSize()
        var largeWidget = CGSize()
    }
    var size: widget { 
        switch UIScreen.main.bounds.size { 
    
    // IOS    
            
        // iPhone 14 Pro Max
        case CGSize(width: 430, height: 932):   
            return widget(smallWidget: CGSize(width: 170, height: 170), mediumWidget: CGSize(width: 364, height: 170), largeWidget: CGSize(width: 364, height: 382))
        
        // iPhone 14 Plus, iPhone 13 Pro Max, iPhone 12 Pro Max
        case CGSize(width: 428, height: 926):   
            return widget(smallWidget: CGSize(width: 170, height: 170), mediumWidget: CGSize(width: 364, height: 170), largeWidget: CGSize(width: 364, height: 382))
          
        // iPhone 11 Pro Max, iPhone 11, iPhone XR, iPhone XS Max
        case CGSize(width: 414, height: 896):   
            return widget(smallWidget: CGSize(width: 169, height: 169), mediumWidget: CGSize(width: 360, height: 169), largeWidget: CGSize(width: 360, height: 379))
        
        // iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus
        case CGSize(width: 414, height: 736):   
            return widget(smallWidget: CGSize(width: 159, height: 159), mediumWidget: CGSize(width: 348, height: 157), largeWidget: CGSize(width: 348, height: 357))
            
        // iPhone 14 Pro, 
        case CGSize(width: 393, height: 852):   
            return widget(smallWidget: CGSize(width: 158, height: 158), mediumWidget: CGSize(width: 338, height: 158), largeWidget: CGSize(width: 338, height: 354))
            
        // iPhone 14, iPhone 13, iPhone 13 Pro, iPhone 12, iPhone 12 Pro
        case CGSize(width: 390, height: 844):   
            return widget(smallWidget: CGSize(width: 158, height: 158), mediumWidget: CGSize(width: 338, height: 158), largeWidget: CGSize(width: 338, height: 354))
            
        // iPhone 13 Mini, iPhone 12 Mini, iPhone 11 Pro, iPhone XS, iPhone X
        case CGSize(width: 375, height: 812):   
            return widget(smallWidget: CGSize(width: 155, height: 155), mediumWidget: CGSize(width: 329, height: 155), largeWidget: CGSize(width: 329, height: 345))
            
        // iPhone SE 3, iPhone SE 2, iPhone 8, iPhone 7, iPhone 6s, iPhone 6
        case CGSize(width: 375, height: 667):   
            return widget(smallWidget: CGSize(width: 148, height: 148), mediumWidget: CGSize(width: 321, height: 148), largeWidget: CGSize(width: 321, height: 324))
            
    // iPadOS        
           
        // Here I‘m stuck at the moment and don‘t know which values are the correct ones
       
            
        default:
            return widget(smallWidget: CGSize(width: 155, height: 155), mediumWidget: CGSize(width: 342, height: 155), largeWidget: CGSize(width: 342, height: 342))
        }
    }

Meaning of iPadOS Widget Targets (Canvas, Device)?

0 Answers0