This appears to be an issue with SyntaxHighlighter the underlying js library that the plugin uses. I loaded up the js demo on its own and got the same offset results on my iPhone. I’m still unclear on the reason but the font size of the gutter number is not consistent with the code lines.
One potential fix is to adjust the font-size on the gutter numbers up by a small percentage to match the code. Media queries could be used to target and apply the fix only for iPhone and iPad devices.
I dropped the following code into the example that comes with the SyntaxHighlighter js package. It corrected the problem on my iPhone. You could probably put this CSS into your WordPress theme and get the same results.
<style type="text/css">
/* ios safari line number fix */
/* ipad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
td.gutter div.line { font-size: 1.4em !important; }
}
/* iphone */
@media only screen and (max-device-width: 480px) {
td.gutter div.line { font-size: 1.4em !important; }
}
</style>
It holds up well for me with lengthy code snippets (50+ lines). I don’t have an iPad to test on.